Design Studio

Creative direction + data-driven design intelligence for distinctive, production-grade frontend interfaces. Merges bold aesthetic philosophy with a searchable database of 750+ recommendations.

Designing: @$1

Workflow

Step 1: Creative Direction

Before touching any tool, commit to a bold aesthetic direction:

• Purpose: What problem does this interface solve? Who uses it?
• Tone: Pick a strong direction: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian
• Constraints: Framework, performance, accessibility requirements
• Differentiator: What makes this UNFORGETTABLE? What's the one thing someone will remember?

CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.

Also extract from the user request:

• Product type: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
• Industry: healthcare, fintech, gaming, education, beauty, etc.
• Stack: React, Vue, Next.js, or default to html-tailwind

Step 2: Generate Design System (REQUIRED)

Feed your creative direction into the search engine:

python3 scripts/search.py "<product_type> <tone> <industry> <keywords>" --design-system [-p "Project Name"]

This searches 5 domains in parallel (product, style, color, landing, typography), applies reasoning rules, and returns a complete design system: pattern, style, colors, typography, effects, anti-patterns.

Persist for multi-session projects:

python3 scripts/search.py "<query>" --design-system --persist -p "Project Name"

Creates design-system/MASTER.md (global source of truth) and design-system/pages/ for page-specific overrides.

With page override:

python3 scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"

Step 3: Refine with Domain Searches

Supplement the design system with targeted lookups:

Feed your creative direction into these queries — if you chose "brutalist/raw", search for brutalism raw concrete, not just dashboard.

Step 4: Stack Guidelines

Get implementation-specific best practices (default: html-tailwind):

python3 scripts/search.py "<keyword>" --stack html-tailwind

Available stacks: html-tailwind, react, nextjs, vue, svelte, nuxtjs, nuxt-ui, astro, swiftui, react-native, flutter, shadcn, jetpack-compose

Step 5: Implement with Aesthetic Precision

Build working code (HTML/CSS/JS, React, Vue, etc.) that is production-grade, visually striking, and cohesive. Apply these principles:

• Typography: Choose distinctive, characterful fonts. Pair a display font with a refined body font. NEVER use Inter, Roboto, Arial, or system fonts
• Color & Theme: Commit to a cohesive palette. Use CSS variables. Dominant colors with sharp accents outperform timid, evenly-distributed palettes
• Motion: CSS-only solutions for HTML, Motion library for React. Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise
• Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density
• Backgrounds & Visual Details: Create atmosphere and depth. Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, grain overlays

Match complexity to vision: Maximalist designs need elaborate code with extensive animations. Minimalist designs need restraint, precision, and careful attention to spacing and subtle details.

Search Reference

Available Domains

Output Formats

# ASCII box (default)
python3 scripts/search.py "fintech crypto" --design-system

# Markdown
python3 scripts/search.py "fintech crypto" --design-system -f markdown

Anti-Patterns

NEVER produce generic AI aesthetics:

Professional UI Rules

Icons & Visual Elements

Interaction

Light/Dark Mode

Layout

UX Priority Rules

Pre-Delivery Checklist

Visual Quality

• No emojis used as icons (SVG only)
• All icons from consistent set (Heroicons/Lucide)
• Brand logos verified (Simple Icons)
• Hover states don't cause layout shift
• Design is distinctive — not generic AI output

Interaction

• All clickable elements have cursor-pointer
• Hover states provide clear visual feedback
• Transitions are smooth (150-300ms)
• Focus states visible for keyboard navigation

Light/Dark Mode

• Text has sufficient contrast (4.5:1 minimum)
• Glass/transparent elements visible in light mode
• Borders visible in both modes

Layout

• Floating elements have proper edge spacing
• No content hidden behind fixed navbars
• Responsive at 375px, 768px, 1024px, 1440px
• No horizontal scroll on mobile

Accessibility

• All images have alt text
• Form inputs have labels
• Color is not the only indicator
• prefers-reduced-motion respected

Creative Distinctiveness

• Does this look genuinely designed for the context, or like template output?
• Would someone remember this design? What's the unforgettable element?
• Is the aesthetic direction executed with precision and intentionality?

If Connectors Available

• figma Export generated design tokens and component specs to a Figma file
• playwright Screenshot the implemented interface for visual QA
• github Open a PR with the generated code and design system files
• vercel Deploy the implementation for live preview

Prerequisites

python3 --version || python --version

macOS: brew install python3 | Ubuntu: sudo apt install python3 | Windows: winget install Python.Python.3.12