Frontend Design Skill
A comprehensive frontend design system that generates professional landing pages across multiple platforms. This skill combines design expertise with anti-slop guardrails to create clean, modern interfaces that avoid generic AI aesthetics.
Input Spectrum
This skill handles a wide spectrum of input detail levels:
Vibes Only
- Example: "a modern SaaS landing page that feels trustworthy"
- Behavior: Generate clarifying questions OR apply tasteful defaults
- Focus: Mood, industry, target audience
Colors & Mood
- Example: "Healthcare app, calming blues (#2563eb, #1e40af), professional but approachable"
- Behavior: Use specified palette as foundation, derive complementary colors
- Focus: Brand personality, emotional tone
Content Provided
- Example: Headlines, feature lists, CTAs, product descriptions
- Behavior: Design around provided content, suggest improvements
- Focus: Information architecture, content hierarchy
Template Specified
- Example: "Use the saas-minimal template with green accent"
- Behavior: Load template from
templates/<name>.yaml, apply customizations
- Focus: Template adaptation, brand alignment
Generation Workflow
1. Input Processing
- Analyze input detail level (vibes → template spectrum)
- Detect or ask for target platform (Zo.space, HTML, Next.js)
- Apply context clues from user's environment or previous requests
2. Clarification (when needed)
Ask targeted questions for sparse input:
- "What's the primary call-to-action?"
- "Who's your target audience?"
- "Any brand colors or visual references?"
- "What feeling should visitors have?"
3. Anti-Slop Verification
Before generating, review references/anti-patterns.md and ensure design avoids:
- Generic purple/blue gradients
- Overly symmetrical layouts
- Stock illustration aesthetic
- Excessive animations
- Poor typography hierarchy
- Generic "startup" messaging
4. Multi-Variant Generation
When --variants N is requested:
- Generate N distinct design directions
- Vary layout approach, color treatment, typography scale
- Maintain consistent content hierarchy across variants
- Present clear distinctions between approaches
Platform-Specific Output
Zo.space (React/Tailwind/Hono)
Create React components that leverage Zo's full-stack capabilities:
// Use update_space_route(path, route_type="page", code, public=True)
import { useState } from "react";
import { ArrowRight, Check } from "lucide-react";
export default function LandingPage() {
const [email, setEmail] = useState("");
return (
<div className="min-h-screen bg-zinc-50">
{/* Component content */}
</div>
);
}
Technical requirements:
- Component must be default export React function
- Use Tailwind 4 classes throughout
- Import icons from
lucide-react only
- Reference uploaded assets via their asset_path
- Handle form state with React hooks when needed
- Use semantic HTML for accessibility
Standalone HTML
Self-contained HTML files that work immediately:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!-- Content with inline Tailwind -->
</body>
</html>
Technical requirements:
- Use Tailwind CDN (no external CSS files)
- Inline all custom styles within
<style> tags
- No external dependencies beyond Tailwind CDN
- Should work when opened directly in browser
- Include basic responsive design patterns
Next.js (App Router)
Modern Next.js components with latest patterns:
// app/page.tsx or components
"use client"; // Only if interactivity needed
export default async function LandingPage() {
return (
<main className="min-h-screen">
{/* Component content */}
</main>
);
}
Technical requirements:
- Use App Router conventions
- Include
"use client" directive only when needed
- Export default async function component
- Follow Next.js 14+ patterns
- Use standard Tailwind classes
- Handle server/client components appropriately
Template Application
When a template is specified:
1. Template Loading
- Load template YAML from
templates/<name>.yaml
- Parse
layout, palette, typography, and style_notes sections
- Validate template exists and is well-formed
2. Value Application
- Apply color palette to design system
- Use typography scale for headings/body text
- Follow layout constraints (grid, spacing, component arrangement)
- Incorporate style_notes as aesthetic guidance
3. Content Integration
- User-provided content takes precedence over template defaults
- Adapt template structure to accommodate content length
- Maintain template's visual character while serving content needs
4. Brand Customization
- Allow accent color overrides
- Adapt template patterns to brand voice
- Preserve template's design integrity while personalizing
Template Capture
When a generated page perfectly captures the aesthetic you want, you can preserve it as a reusable template for future projects.
When to Capture
Capture a template when:
- The generated page has a distinctive visual character worth reusing
- You find yourself wanting to recreate the same "feel" for other projects
- The page demonstrates a successful aesthetic approach for a specific domain
- The design balances uniqueness with broad applicability
Analysis Process
To create an accurate template, analyze the generated page systematically:
1. Color Palette Extraction
- Use browser devtools or eyedropper tools to sample exact colors
- Identify the primary brand color, secondary supporting color, and accent color
- Note background, surface, text, and muted text colors
- Verify contrast ratios meet accessibility standards (4.5:1 minimum)
2. Typography Assessment
- Identify font families used for headings and body text
- Note font weights and the typographic scale (tight/normal/loose)
- Observe heading hierarchy and how it creates visual rhythm
- Check line-height and letter-spacing characteristics
3. Layout Pattern Recognition
- Measure or estimate max-width settings
- Assess spacing rhythm between sections (compact/balanced/airy)
- Note border-radius treatment (none/subtle/rounded/pill)
- Identify grid systems and alignment patterns
4. Section Structure Analysis
- List all sections in order of appearance
- Identify the specific variant used for each section type
- Note any unique section combinations or arrangements
- Document content patterns that work well with this structure
5. Aesthetic Essence Capture
- Describe the intangible "feel" in concrete terms
- Note shadow usage, animation styles, interaction patterns
- Identify what makes this template distinctive from others
- Document the emotional impression it creates
Template Creation Process
1. Start with the Schema
Copy templates/_TEMPLATE.yaml as your starting point:
cp templates/_TEMPLATE.yaml templates/your-template-name.yaml
2. Fill in Structured Fields
- name: Use descriptive slug format (e.g.,
minimal-saas, bold-agency, warm-nonprofit)
- description: Write 2-3 sentences explaining use cases and target aesthetic
- source: Credit the original page URL or describe the synthesis process
- created: Use current date in YYYY-MM-DD format
- palette: Fill in all 7 required color values using exact hex codes
- typography: Specify fonts, scale, and heading weight
- layout: Set max-width, spacing, and border-radius preferences
- sections: List all sections with their variants in order
3. Craft Detailed Style Notes
The style_notes field is critical for preserving design nuance. Include:
- Visual characteristics: Shadows, borders, gradients (or lack thereof)
- Typography treatment: Hierarchy approach, text decoration patterns
- Color usage patterns: How colors are applied across different elements
- Spacing philosophy: Density preferences, rhythm between elements
- Interactive elements: Button styles, hover states, link treatments
- Content density: How much information fits comfortably
- Unique design elements: Anything that sets this template apart
- Emotional tone: The feeling users should have when viewing pages using this template
4. Template Naming Conventions
Choose names that immediately convey the aesthetic:
- Good examples:
minimal-saas, bold-agency, warm-nonprofit, technical-docs, luxury-ecommerce
- Avoid generic names:
template-1, blue-theme, modern-design
- Include context: Reference the industry or mood when helpful
- Keep it memorable: Names you'll recognize months later
5. Validation Check
Before saving, verify your template:
- All required fields are filled with valid values
- Colors use proper hex format (#000000)
- Typography fonts are available (Google Fonts or system fonts)
- Section types and variants exist in the skill's repertoire
- Style notes capture the essence clearly enough for recreation
Example Capture Process
Original page: A meditation app landing page with sage greens and serif typography
Analysis notes:
- Color palette: Sage primary (#059669), warm white background (#FFFEF7)
- Typography: Playfair Display headings, Source Serif Pro body, loose scale
- Layout: Narrow max-width, airy spacing, subtle rounded corners
- Feel: Calm, premium, trustworthy, organic
Template creation:
name: calm-wellness
description: |
Meditation and wellness app template with sage greens and serif typography.
Creates a premium, organic feeling suitable for mindfulness, therapy,
and personal development products.
source: Meditation app landing page, adapted for broader wellness market
# ... rest of structured fields
style_notes: |
Serene, premium aesthetic using sage greens and warm typography.
Serif fonts create trust and tradition. Generous whitespace suggests
spaciousness and calm. Rounded elements feel organic and approachable...
Template Library Management
- Keep it curated: Only capture truly distinctive templates worth reusing
- Regular review: Periodically assess whether older templates still represent best practices
- Documentation: Update style_notes if you discover new applications or refinements
- Sharing: Templates with broad appeal can become part of the core library
Design Principles
Typography Hierarchy
- H1: Hero headlines, primary value proposition
- H2: Section headers, feature categories
- H3: Feature names, subsection titles
- Body: Descriptions, supporting text
- Small: Captions, legal text, metadata
Color Strategy
- Primary: Brand color, CTAs, key interactive elements
- Secondary: Supporting actions, accents, highlights
- Neutral: Text, backgrounds, borders, subtle elements
- Semantic: Success, warning, error, info states
Layout Patterns
- Hero Section: Value proposition + primary CTA
- Features Grid: 3-4 column grid, icon + title + description
- Social Proof: Testimonials, logos, usage stats
- Pricing: Clear tiers, feature comparison
- Footer: Links, contact, social, legal
Accessibility Standards
- Sufficient color contrast (4.5:1 minimum)
- Focus indicators for all interactive elements
- Semantic HTML structure
- Alt text for images
- Keyboard navigation support
- Screen reader friendly markup
Anti-Slop Guardrails
Reference references/anti-patterns.md for comprehensive list. Key avoidances:
Visual Anti-Patterns
- Generic purple/blue gradient backgrounds
- Symmetrical layouts without visual interest
- Stock illustration aesthetic (geometric shapes, flat characters)
- Excessive drop shadows or gloss effects
- Rainbow color schemes without purpose
Content Anti-Patterns
- "Revolutionize your workflow" messaging
- Generic "trusted by thousands" claims
- Excessive exclamation points
- Buzzword-heavy descriptions
- Vague value propositions
UX Anti-Patterns
- Too many CTAs competing for attention
- Poor information hierarchy
- Tiny touch targets on mobile
- Auto-playing videos or animations
- Pop-ups that interrupt reading flow
Usage Examples
Basic Usage
Generate a landing page for a project management tool. Clean, professional, focus on team collaboration features.
With Variants
Create a SaaS pricing page --variants 3
Colors: #2563eb, #1e40af
Content: Starter ($29), Pro ($99), Enterprise ($299)
Template-Based
Use the saas-minimal template for a meditation app
Primary color: #059669 (green)
Target: busy professionals seeking mindfulness
Platform-Specific
Generate a Next.js component for our product showcase
Features: AI writing, grammar check, tone analysis
Style: Grammarly-inspired but distinct
Quality Standards
Every generated design should meet:
- Visual Polish: Professional appearance, consistent spacing
- Content Clarity: Clear value proposition, logical flow
- Technical Quality: Valid code, responsive design, accessibility
- Brand Coherence: Consistent voice, appropriate aesthetics
- Performance: Fast loading, optimized images, clean markup
Advanced Features
Responsive Design
- Mobile-first approach with progressive enhancement
- Breakpoint strategy: sm (640px), md (768px), lg (1024px), xl (1280px)
- Touch-friendly interactive elements (min 44px)
- Readable typography at all screen sizes
Performance Optimization
- Semantic HTML structure for fast parsing
- Efficient CSS with Tailwind utilities
- Optimized images with proper sizing
- Minimal JavaScript for interactivity
SEO Readiness
- Proper heading hierarchy (H1 → H6)
- Meta descriptions and titles
- Structured data markup when relevant
- Fast loading times
- Mobile-friendly design
This skill transforms design briefs into production-ready landing pages that combine aesthetic appeal with technical excellence and user experience best practices.
1---2name: frontend3description: Generate high-quality landing pages with anti-slop guardrails and multi-platform support. Creates modern, accessible designs for Zo.space, standalone HTML, and Next.js with professional aesthetics and clear typography hierarchy.4---56# Frontend Design Skill78A comprehensive frontend design system that generates professional landing pages across multiple platforms. This skill combines design expertise with anti-slop guardrails to create clean, modern interfaces that avoid generic AI aesthetics.910## Input Spectrum1112This skill handles a wide spectrum of input detail levels:1314### Vibes Only15- **Example**: "a modern SaaS landing page that feels trustworthy"16- **Behavior**: Generate clarifying questions OR apply tasteful defaults17- **Focus**: Mood, industry, target audience1819### Colors & Mood20- **Example**: "Healthcare app, calming blues (#2563eb, #1e40af), professional but approachable"21- **Behavior**: Use specified palette as foundation, derive complementary colors22- **Focus**: Brand personality, emotional tone2324### Content Provided25- **Example**: Headlines, feature lists, CTAs, product descriptions26- **Behavior**: Design around provided content, suggest improvements27- **Focus**: Information architecture, content hierarchy2829### Template Specified30- **Example**: "Use the saas-minimal template with green accent"31- **Behavior**: Load template from `templates/<name>.yaml`, apply customizations32- **Focus**: Template adaptation, brand alignment3334## Generation Workflow3536### 1. Input Processing37- Analyze input detail level (vibes → template spectrum)38- Detect or ask for target platform (Zo.space, HTML, Next.js)39- Apply context clues from user's environment or previous requests4041### 2. Clarification (when needed)42Ask targeted questions for sparse input:43- "What's the primary call-to-action?"44- "Who's your target audience?"45- "Any brand colors or visual references?"46- "What feeling should visitors have?"4748### 3. Anti-Slop Verification49Before generating, review `references/anti-patterns.md` and ensure design avoids:50- Generic purple/blue gradients51- Overly symmetrical layouts 52- Stock illustration aesthetic53- Excessive animations54- Poor typography hierarchy55- Generic "startup" messaging5657### 4. Multi-Variant Generation58When `--variants N` is requested:59- Generate N distinct design directions60- Vary layout approach, color treatment, typography scale61- Maintain consistent content hierarchy across variants62- Present clear distinctions between approaches6364## Platform-Specific Output6566### Zo.space (React/Tailwind/Hono)6768Create React components that leverage Zo's full-stack capabilities:6970```typescript71// Use update_space_route(path, route_type="page", code, public=True)72import { useState } from "react";73import { ArrowRight, Check } from "lucide-react";7475export default function LandingPage() {76 const [email, setEmail] = useState("");77 78 return (79 <div className="min-h-screen bg-zinc-50">80 {/* Component content */}81 </div>82 );83}84```8586**Technical requirements:**87- Component must be default export React function88- Use Tailwind 4 classes throughout89- Import icons from `lucide-react` only90- Reference uploaded assets via their asset_path91- Handle form state with React hooks when needed92- Use semantic HTML for accessibility9394### Standalone HTML9596Self-contained HTML files that work immediately:9798```html99<!DOCTYPE html>100<html lang="en">101<head>102 <meta charset="UTF-8">103 <meta name="viewport" content="width=device-width, initial-scale=1.0">104 <title>Page Title</title>105 <script src="https://cdn.tailwindcss.com"></script>106</head>107<body>108 <!-- Content with inline Tailwind -->109</body>110</html>111```112113**Technical requirements:**114- Use Tailwind CDN (no external CSS files)115- Inline all custom styles within `<style>` tags116- No external dependencies beyond Tailwind CDN117- Should work when opened directly in browser118- Include basic responsive design patterns119120### Next.js (App Router)121122Modern Next.js components with latest patterns:123124```tsx125// app/page.tsx or components126"use client"; // Only if interactivity needed127128export default async function LandingPage() {129 return (130 <main className="min-h-screen">131 {/* Component content */}132 </main>133 );134}135```136137**Technical requirements:**138- Use App Router conventions139- Include `"use client"` directive only when needed140- Export default async function component141- Follow Next.js 14+ patterns142- Use standard Tailwind classes143- Handle server/client components appropriately144145## Template Application146147When a template is specified:148149### 1. Template Loading150- Load template YAML from `templates/<name>.yaml`151- Parse `layout`, `palette`, `typography`, and `style_notes` sections152- Validate template exists and is well-formed153154### 2. Value Application155- Apply color palette to design system156- Use typography scale for headings/body text157- Follow layout constraints (grid, spacing, component arrangement)158- Incorporate style_notes as aesthetic guidance159160### 3. Content Integration161- User-provided content takes precedence over template defaults162- Adapt template structure to accommodate content length163- Maintain template's visual character while serving content needs164165### 4. Brand Customization166- Allow accent color overrides167- Adapt template patterns to brand voice168- Preserve template's design integrity while personalizing169170## Template Capture171172When a generated page perfectly captures the aesthetic you want, you can preserve it as a reusable template for future projects.173174### When to Capture175176Capture a template when:177- The generated page has a distinctive visual character worth reusing178- You find yourself wanting to recreate the same "feel" for other projects179- The page demonstrates a successful aesthetic approach for a specific domain180- The design balances uniqueness with broad applicability181182### Analysis Process183184To create an accurate template, analyze the generated page systematically:185186#### 1. Color Palette Extraction187- Use browser devtools or eyedropper tools to sample exact colors188- Identify the primary brand color, secondary supporting color, and accent color189- Note background, surface, text, and muted text colors190- Verify contrast ratios meet accessibility standards (4.5:1 minimum)191192#### 2. Typography Assessment193- Identify font families used for headings and body text194- Note font weights and the typographic scale (tight/normal/loose)195- Observe heading hierarchy and how it creates visual rhythm196- Check line-height and letter-spacing characteristics197198#### 3. Layout Pattern Recognition199- Measure or estimate max-width settings200- Assess spacing rhythm between sections (compact/balanced/airy)201- Note border-radius treatment (none/subtle/rounded/pill)202- Identify grid systems and alignment patterns203204#### 4. Section Structure Analysis205- List all sections in order of appearance206- Identify the specific variant used for each section type207- Note any unique section combinations or arrangements208- Document content patterns that work well with this structure209210#### 5. Aesthetic Essence Capture211- Describe the intangible "feel" in concrete terms212- Note shadow usage, animation styles, interaction patterns213- Identify what makes this template distinctive from others214- Document the emotional impression it creates215216### Template Creation Process217218#### 1. Start with the Schema219Copy `templates/_TEMPLATE.yaml` as your starting point:220```bash221cp templates/_TEMPLATE.yaml templates/your-template-name.yaml222```223224#### 2. Fill in Structured Fields225- **name**: Use descriptive slug format (e.g., `minimal-saas`, `bold-agency`, `warm-nonprofit`)226- **description**: Write 2-3 sentences explaining use cases and target aesthetic227- **source**: Credit the original page URL or describe the synthesis process228- **created**: Use current date in YYYY-MM-DD format229- **palette**: Fill in all 7 required color values using exact hex codes230- **typography**: Specify fonts, scale, and heading weight231- **layout**: Set max-width, spacing, and border-radius preferences232- **sections**: List all sections with their variants in order233234#### 3. Craft Detailed Style Notes235The `style_notes` field is critical for preserving design nuance. Include:236237- **Visual characteristics**: Shadows, borders, gradients (or lack thereof)238- **Typography treatment**: Hierarchy approach, text decoration patterns239- **Color usage patterns**: How colors are applied across different elements240- **Spacing philosophy**: Density preferences, rhythm between elements241- **Interactive elements**: Button styles, hover states, link treatments242- **Content density**: How much information fits comfortably243- **Unique design elements**: Anything that sets this template apart244- **Emotional tone**: The feeling users should have when viewing pages using this template245246#### 4. Template Naming Conventions247248Choose names that immediately convey the aesthetic:249250- **Good examples**: `minimal-saas`, `bold-agency`, `warm-nonprofit`, `technical-docs`, `luxury-ecommerce`251- **Avoid generic names**: `template-1`, `blue-theme`, `modern-design`252- **Include context**: Reference the industry or mood when helpful253- **Keep it memorable**: Names you'll recognize months later254255#### 5. Validation Check256257Before saving, verify your template:258- All required fields are filled with valid values259- Colors use proper hex format (#000000)260- Typography fonts are available (Google Fonts or system fonts)261- Section types and variants exist in the skill's repertoire262- Style notes capture the essence clearly enough for recreation263264### Example Capture Process265266**Original page**: A meditation app landing page with sage greens and serif typography267268**Analysis notes**:269- Color palette: Sage primary (#059669), warm white background (#FFFEF7)270- Typography: Playfair Display headings, Source Serif Pro body, loose scale271- Layout: Narrow max-width, airy spacing, subtle rounded corners272- Feel: Calm, premium, trustworthy, organic273274**Template creation**:275```yaml276name: calm-wellness277description: |278 Meditation and wellness app template with sage greens and serif typography.279 Creates a premium, organic feeling suitable for mindfulness, therapy,280 and personal development products.281source: Meditation app landing page, adapted for broader wellness market282# ... rest of structured fields283style_notes: |284 Serene, premium aesthetic using sage greens and warm typography.285 Serif fonts create trust and tradition. Generous whitespace suggests286 spaciousness and calm. Rounded elements feel organic and approachable...287```288289### Template Library Management290291- **Keep it curated**: Only capture truly distinctive templates worth reusing292- **Regular review**: Periodically assess whether older templates still represent best practices293- **Documentation**: Update style_notes if you discover new applications or refinements294- **Sharing**: Templates with broad appeal can become part of the core library295296## Design Principles297298### Typography Hierarchy299- **H1**: Hero headlines, primary value proposition300- **H2**: Section headers, feature categories 301- **H3**: Feature names, subsection titles302- **Body**: Descriptions, supporting text303- **Small**: Captions, legal text, metadata304305### Color Strategy306- **Primary**: Brand color, CTAs, key interactive elements307- **Secondary**: Supporting actions, accents, highlights308- **Neutral**: Text, backgrounds, borders, subtle elements309- **Semantic**: Success, warning, error, info states310311### Layout Patterns312- **Hero Section**: Value proposition + primary CTA313- **Features Grid**: 3-4 column grid, icon + title + description314- **Social Proof**: Testimonials, logos, usage stats315- **Pricing**: Clear tiers, feature comparison316- **Footer**: Links, contact, social, legal317318### Accessibility Standards319- Sufficient color contrast (4.5:1 minimum)320- Focus indicators for all interactive elements 321- Semantic HTML structure322- Alt text for images323- Keyboard navigation support324- Screen reader friendly markup325326## Anti-Slop Guardrails327328Reference `references/anti-patterns.md` for comprehensive list. Key avoidances:329330### Visual Anti-Patterns331- Generic purple/blue gradient backgrounds332- Symmetrical layouts without visual interest333- Stock illustration aesthetic (geometric shapes, flat characters)334- Excessive drop shadows or gloss effects335- Rainbow color schemes without purpose336337### Content Anti-Patterns 338- "Revolutionize your workflow" messaging339- Generic "trusted by thousands" claims340- Excessive exclamation points341- Buzzword-heavy descriptions342- Vague value propositions343344### UX Anti-Patterns345- Too many CTAs competing for attention346- Poor information hierarchy347- Tiny touch targets on mobile348- Auto-playing videos or animations349- Pop-ups that interrupt reading flow350351## Usage Examples352353### Basic Usage354```355Generate a landing page for a project management tool. Clean, professional, focus on team collaboration features.356```357358### With Variants359```360Create a SaaS pricing page --variants 3361Colors: #2563eb, #1e40af362Content: Starter ($29), Pro ($99), Enterprise ($299)363```364365### Template-Based366```367Use the saas-minimal template for a meditation app368Primary color: #059669 (green)369Target: busy professionals seeking mindfulness370```371372### Platform-Specific373```374Generate a Next.js component for our product showcase375Features: AI writing, grammar check, tone analysis376Style: Grammarly-inspired but distinct377```378379## Quality Standards380381Every generated design should meet:382383- **Visual Polish**: Professional appearance, consistent spacing384- **Content Clarity**: Clear value proposition, logical flow385- **Technical Quality**: Valid code, responsive design, accessibility386- **Brand Coherence**: Consistent voice, appropriate aesthetics387- **Performance**: Fast loading, optimized images, clean markup388389## Advanced Features390391### Responsive Design392- Mobile-first approach with progressive enhancement393- Breakpoint strategy: sm (640px), md (768px), lg (1024px), xl (1280px)394- Touch-friendly interactive elements (min 44px)395- Readable typography at all screen sizes396397### Performance Optimization398- Semantic HTML structure for fast parsing399- Efficient CSS with Tailwind utilities400- Optimized images with proper sizing401- Minimal JavaScript for interactivity402403### SEO Readiness404- Proper heading hierarchy (H1 → H6)405- Meta descriptions and titles406- Structured data markup when relevant407- Fast loading times408- Mobile-friendly design409410This skill transforms design briefs into production-ready landing pages that combine aesthetic appeal with technical excellence and user experience best practices.
thevibethinker