Jonathon's AI Wiki

Design Skills Workflow

6 min read

Source: skill files (frontend-design, teach-impeccable, ui-ux-pro-max, taste-skill, soft-skill, arrange, typeset, colorize, animate, critique, audit, bolder, distill, delight, polish, harden, overdrive)

Step-by-step workflow from blank canvas to polished, production-grade UI. This is the operational sequence --- follow it in order. Skipping steps (especially the early ones) is the primary reason AI-generated UI still looks like AI-generated UI.

Step 1: Setup (One-Time Per Project)

Run /teach-impeccable to create your .impeccable.md file. The skill asks about:

  • Target users --- who uses this product, their technical level, expectations
  • Brand identity --- existing brand, colors, personality, tone
  • Aesthetic preferences --- what styles you gravitate toward, what you want to avoid
  • Design principles --- what matters most (speed? elegance? clarity? delight?)

This file persists across sessions. You do this once per project.

Step 2: Context Gathering

Every time you start a new UI task, frontend-design runs its 3-stage discovery:

  1. Check instructions --- reads CLAUDE.md, project instructions, conversation context
  2. Check .impeccable.md --- reads the design context file created in Step 1
  3. Run teach-impeccable --- only if Steps 1 and 2 found nothing

Do not skip this. Context is what separates a design from a template.

Step 3: Design System

Run the ui-ux-pro-max --design-system command:

/ui-ux-pro-max --design-system "product type, style keywords, industry" --persist

This generates a complete design system in one command:

  • Color palette with semantic tokens
  • Typography scale with font pairing
  • Spacing scale
  • Component patterns
  • Interaction guidelines

The --persist flag saves this to design-system/MASTER.md and page-specific overrides. All subsequent skills read from this.

Step 4: Creative Direction

Choose your aesthetic. Two approaches:

Approach A: taste-skill vibe archetypes

  • Ethereal Glass (OLED black, mesh gradients, floating elements)
  • Editorial Luxury (warm creams, serif typography, film grain textures)
  • Soft Structuralism (silver-grey, bold sans-serif, diffused shadows)

Approach B: soft-skill creative variance engine

  • Layout archetypes: Asymmetrical Bento, Z-Axis Cascade, Editorial Split
  • Haptic micro-aesthetics: Double-Bezel, Button-in-Button, Macro-Whitespace
  • Motion choreography: Fluid Island Nav, Magnetic Hover, Scroll Interpolation

Pick one approach and commit. Do not mix them for the same project.

Step 5: Build

Generate the UI with frontend-design and your chosen Tier 1 skills active. During the build:

  • The AI Slop Test runs continuously: “Would someone immediately believe AI made this?”
  • Every decision traces back to the aesthetic direction from Step 4
  • No defaulting to safe choices --- the direction governs

This produces a functional first version with intentional design, not a generic template.

Step 6: Evaluate

Run evaluation before refining. This tells you what to fix.

critique --- UX assessment using Nielsen’s 10 heuristics:

  • Scores 0-20 per heuristic
  • Assesses visual hierarchy, information architecture, emotional resonance, cognitive load
  • Identifies specific problems with specific locations

audit --- Technical quality check:

  • P0-P3 severity across 5 dimensions (accessibility, performance, theming, responsive, anti-patterns)
  • Flags implementation issues that critique misses

Read the results. Make a list of the top 5 issues from each.

Step 7: Refine Sequentially

Apply Tier 3 skills to the issues identified in Step 6. Order matters:

  1. arrange --- Fix layout, spacing, and visual rhythm first. Layout is the foundation; later changes build on it.
  2. typeset --- Fix font choices, hierarchy, sizing, weight. Typography carries 80% of a design’s personality.
  3. colorize --- Add strategic color using the 60/30/10 rule (60% dominant, 30% secondary, 10% accent). Color is expression, not decoration.
  4. animate --- Add purposeful motion:
    • Micro-interactions: 150-300ms, ease-out-quart
    • Entrance animations: 500-800ms, ease-out-expo
    • Transitions: transform and opacity only
    • Always respect prefers-reduced-motion

Do not apply all four to every project. Only apply the ones that address issues found in Step 6.

Step 8: Amplify or Simplify

Based on the critique results, choose one:

bolder --- If the design is too safe, too bland, too expected. Increases visual impact, contrast, and dynamism while maintaining usability. Use when critique says “competent but forgettable.”

distill --- If the design is too cluttered, too complex, too busy. Strips to essence, removes unnecessary elements, increases whitespace. Use when critique says “overwhelming” or “cognitive load too high.”

These are mutually exclusive. Never run both.

Step 9: Delight

Add personality, joy, and unexpected touches:

  • Hover easter eggs
  • Loading state personality
  • Empty state illustrations
  • Micro-copy with character
  • Unexpected interaction responses

Only invoke delight after everything else works. Delight on a broken interface is lipstick on a pig.

Step 10: Polish

Final pass before shipping:

  • Alignment pixel-checking
  • Spacing consistency
  • Hover/focus/active/disabled states on every interactive element
  • Edge-to-edge responsive check (320px through 1440px)
  • Light and dark mode verification
  • Empty state design
  • Loading state design
  • Error state design

Polish catches the details that separate “good enough” from “professionally done.”

Step 11: Harden

Production resilience:

  • i18n readiness --- text that expands 2x in German, RTL layout support
  • Error handling --- network failures, API errors, empty responses
  • Text overflow --- truncation strategy for user-generated content
  • Offline states --- what happens when the connection drops
  • Edge cases --- 0 items, 1 item, 10,000 items, extremely long strings

When to Use Overdrive

Overdrive is for technically ambitious projects that need:

  • Custom shaders (WebGL/WGSL)
  • Spring physics animations
  • Scroll-driven reveals at 60fps
  • Complex canvas interactions
  • Particle systems

Prerequisites: Steps 1-10 must be solid first. Overdrive adds spectacle to a strong foundation. It cannot save a weak one.

Quick Reference: Skill Invocation Order

/teach-impeccable          (once per project)
/ui-ux-pro-max --design-system ... --persist
/frontend-design           (build)
/critique                  (evaluate)
/audit                     (evaluate)
/arrange                   (if layout issues)
/typeset                   (if typography issues)
/colorize                  (if color issues)
/animate                   (if motion needed)
/bolder OR /distill        (based on critique)
/delight                   (after structure is solid)
/polish                    (final pass)
/harden                    (production prep)

Key Takeaways

  • The workflow is sequential and each step builds on the previous one --- skipping early steps degrades all later steps
  • Setup (teach-impeccable) and context gathering are not optional --- they are what prevent generic output
  • Evaluate before refining --- critique and audit tell you what to fix, so you do not waste effort on the wrong things
  • Tier 3 refinement skills have a specific order: arrange before typeset before colorize before animate
  • bolder and distill are mutually exclusive --- pick one based on evaluation results
  • Delight comes last in refinement, harden comes last overall
  • Most projects do not need overdrive --- master Steps 1-11 first

Try It

  1. Pick your next UI project and follow this workflow exactly in order
  2. Time yourself --- the full pipeline takes roughly 30-60 minutes for a single-page UI
  3. At each step, note what the skill changed and whether you would have caught it manually
  4. Compare the final result against a previous project where you skipped the workflow
  5. After 2-3 projects, the workflow becomes instinct and the results compound

Graph View

Backlinks