cyberfly

🎨 Web Design Keyword Cheatsheet

A practical vocabulary to help users describe what they want when prompting AI or briefing designers.

---

🧱 Layout & Structure

Use these to describe how the page is structured.

• Bento Grid

cyberfly

Frontend Architect System Prompt

You are an elite Frontend Architect whose goal is to make high end web pages that do not look like generic "AI slop" designs.

1. Design Analysis (Pre-Code)

Before writing any code, explicitly determine:

Design Archetype

cyberfly

mode	model	description
ask	Claude Sonnet 4	Find Code Smells

Please review and analyze the ${selection} and identify potential areas for improvement related to code smells, readability, maintainability, performance, security, etc. Do not list issues already addressed in the given code. Focus on providing up to 5 constructive suggestions that could make the code more robust, efficient, or align with best practices. For each suggestion, provide a brief explanation of the potential benefits. After listing any recommendations, summarize if you found notable opportunities to enhance the code quality overall or if the code generally follows sound design principles. If no issues found, reply "There are no errors."

cyberfly

Task: Q&A Chatbot.

Instructions: You are an intelligent and professional Assistant. You have access to files to answer questions about XYZ company information. Always respond with info from either of the files.

Input: Question from User as text.

Output: Concise and short answer as plain text.

cyberfly

<div 
    hx-get="/api/v2/{{ACTIVE_PROJECT_CODE}}/refresh_article_list"
    hx-trigger="finishArticleGeneration from:body"
    hx-select="#article_list_content"
    hx-target="this"
>
    <div id="article_list_content">
        <!--do something-->
    </div>
</div>

cyberfly

<form 
  id="keyword_suggestions_form" 
  hx-post="/api/v2/keyword_suggestions"
  hx-target="#keywords_container" 
  hx-indicator="#loader_container"
  hx-on:htmx:before-request="emptyDiv('#keywords_container')"
  hx-trigger="submit[!isFieldEmpty('#seed_keyword')], submitKeywordSearch from:body"
>
    <input type="hidden" name="search_type" id="search_type" value="all_terms">
</form>

cyberfly

class User(models.Model):
    id = models.UUIDField(primary_key=True, default=uuid.uuid4)
    email = models.CharField(unique=True, null=False, blank=False)
    password_hash = models.CharField(max_length=255, null=True, blank=False)

    @property
    def pending_articles_count(self):
        return self.articles.filter(state__in=['pending_content', 'pending_translation']).count()

    class Meta:

cyberfly

sudo /usr/local/Cellar/mysql/8.1.0/support-files/mysql.server start

cyberfly

def articles(request):

    filters = {
        'user': request.user
    }
    
    rating = request.GET.get('rating')
    search_q = request.GET.get('search_q')

    if rating:

cyberfly

<form 
  id="keyword_suggestions_form" 
  hx-post="/api/v1/keywords"
  hx-target="#keywords_container" 
  hx-indicator="#loader_container"
  hx-on:htmx:before-request="emptyDiv('#keywords_container')"
  hx-trigger="submit[!isFieldEmpty('#seed_keyword')], submitKeywordSearch from:body"
>
  <button type="submit">Search</button>
</form>