Define design intent and direction before frontend coding
A pre-coding design-direction skill - purpose, tone, domain, color world, and a craft review bar drawing on six cross-domain lenses.
Why it matters
Establish purposeful design direction and visual strategy for frontend interfaces by defining tone, domain metaphors, color worlds, and craft standards before writing any code.
Outcomes
What it gets done
Define purpose, tone, constraints, and differentiation for the interface
Establish domain vocabulary and color world from product territory
Apply cross-domain principles from cinema, architecture, marketing, UX, automotive, or industrial design
Review design against craft invariants including font loading and viewport prioritization
Install
Add it to your toolbox
Run in your project directory:
curl -fsSL https://spark.entire.vc/get/ag-design-thinking | bash Overview
Design thinking
This skill sets design direction before coding: committing to a tone, naming a domain and color world, and applying cross-domain principles from cinema, architecture, marketing, UX, automotive, and industrial design, checked against a craft review bar. Use it alongside the design skill on every frontend task, before coding, to define purpose, tone, domain, color world, and the review bar.
What it does
This skill establishes direction and intent for frontend design before coding begins, applied alongside a companion design skill on every task. It works through purpose, meaning what problem the interface solves and who uses it, tone, meaning committing to one bold extreme with intention such as brutally minimal, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, or industrial, rather than hedging, constraints covering framework, performance, and accessibility, and differentiation, meaning one unforgettable element, all emphasizing intentionality over intensity. It reserves high-impact devices like full-bleed media, dramatic motion, oversized type, a saturated accent, or parallax for one or two deliberate punctuation moments rather than defaulting to them everywhere, since constant intensity reads as flat - the same restraint applies to scale, color, where one accent beats five, and motion, where one signature move beats constant animation. Domain and color work requires naming five or more concrete concepts or metaphors from the product's world and five or more actual named colors that belong in that world rather than vague temperature words, plus one signature element that could only exist for this specific product. The review bar asks whether you would put your name on this, judging craft and intentionality rather than just function, with two non-negotiable craft invariants that fail the review on a single violation: no font pop-in ever, gating display text on fonts being ready and fading it in, and prioritizing whatever's in the opening viewport to paint complete and correct before anything below the fold loads.
It applies a cross-domain lens, selecting two to three principles from whichever disciplines fit the product, such as UX plus automotive for a dashboard or cinema plus marketing for a brand campaign. Cinema contributes framing and composition, treating the viewport as a frame with depth layering, pacing through a well-orchestrated sequence of reveals over scattered motion, color grading as mood, and focus and depth for visual hierarchy. Architecture contributes human-scale proportion and grid rhythm, wayfinding so users always know where they are, material and light for depth, negative space as structure rather than leftover, and deliberate threshold transition moments. Marketing contributes a single hero message above the fold, a deliberate emotional-versus-rational first beat, unmistakable primary CTA prominence, audience-specific tone and imagery, and consistent brand voice. UX contributes goal-driven task reduction, clear information architecture with minimal cognitive load, visible feedback for every action and state, accessibility covering contrast, focus order, and honoring reduced-motion preferences on public projects, and progressive disclosure. Automotive design contributes a recognizable silhouette, continuous surface language without arbitrary bumps, balanced content-to-chrome proportion, deliberate material and trim hierarchy, and driver-centric primary-control placement. Industrial design contributes form-follows-function, material honesty, obvious affordances, tactile pressable controls, one consistent product personality, and simplifying until it breaks.
When to use - and when NOT to
Use it alongside the design skill on every frontend design task, before writing any code, to define purpose, tone, domain, color world, and the review bar.
Inputs and outputs
Given a product or design brief, it produces a committed tone direction, a named domain vocabulary and color world, a signature differentiator, and cross-domain design principles to apply, checked against the craft-invariant review bar.
Integrations
Pairs directly with a companion design skill for execution and a design-system reference for the font-pop-in and loading-order invariants.
Who it's for
Designers and frontend developers who need a structured pre-coding direction-setting process, committing to one bold, intentional aesthetic and cross-disciplinary principles rather than a generic, unconsidered interface.
Source README
Design thinking
When to Use
Use this skill when you need direction and intent for frontend design. Use with design when defining purpose, tone, domain, color world, and review bar; includes cross-domain lens from cinema, architecture, marketing, UX, automotive, industrial design.
Apply with the design skill on every design task. Do this before coding.
Design thinking (before coding)
- Purpose: What problem does this interface solve? Who uses it?
- Tone: Pick an extreme and execute with intention - e.g. brutally minimal, maximalist, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian.
- Constraints: Framework, performance, accessibility.
- Differentiation: One thing that makes it unforgettable.
Commit to one bold direction. Intentionality over intensity.
Reserve impact for punctuation (use sparingly for effect)
High-impact devices - full-bleed media, dramatic motion, oversized type, a saturated accent, parallax - lose their force the moment they become the default. If every section is a full-screen video, none of them land. Choose 1-2 moments to go big (the hero, the payoff) and make everything else quiet and contained, so the big moments read as deliberate punctuation rather than noise. Restraint is what gives the rare full-bleed beat its hit; wall-to-wall intensity reads as flat. This is the luxury of reduction - a single bold gesture in generous negative space beats maximalism. Applies equally to scale, color (one accent, not five), and motion (one signature move, not constant animation).
Domain and color
- Domain: 5+ concepts, metaphors, or vocabulary from the product's world (territory, not features).
- Color world: 5+ colors that "belong" in that world - what you'd see if this product were a physical space. Not "warm" or "cool"; name actual colors from that domain.
- Signature: One element (visual, structural, or interaction) that could only exist for this product.
Review bar
Ask: "Would I put my name on this?" Design-lead review means: not "does it work?" but "is this unmistakably intentional and crafted?"
Non-negotiable craft invariants (a single failure fails the review):
- No font pop-in. Ever. Title/display text must never flash a fallback face or reflow as the webfont loads. Gate it on
document.fonts.readyand fade in. See design-system → Never let fonts pop in. - First seen, first loaded. Whatever is in the opening viewport (hero text, hero media, brand mark) must be prioritized to paint complete and correct before anything below the fold loads. See design-system → Loading order.
Cross-domain lens
When defining direction, choose which disciplines fit the product and apply 2-3 principles from each. Examples: dashboard → UX + automotive; brand campaign → cinema + marketing; app → UX + industrial design.
Cinema
- Framing and composition: Viewport as frame; rule of thirds, leading lines, foreground/mid/background depth. What's in focus = primary hierarchy.
- Pacing and rhythm: Sequence of reveals (like editing). One well-orchestrated load or scroll beat beats scattered motion.
- Color and mood: Color grading = mood; consistent palette as "look."
- Focus and depth: Focal plane and depth of field → visual hierarchy and layering (blur, opacity, scale).
Architecture
- Scale and proportion: Human scale, rhythm of columns/grid, proportion of elements to viewport.
- Wayfinding: User always knows where they are and where they can go (orientation, nav, breadcrumbs).
- Material and light: Texture and shadow create depth; light direction implies elevation and emphasis.
- Negative space: Intentional emptiness; space as structure, not leftover.
- Thresholds: Entrance and transition moments (landing → app, modal open) as deliberate "crossings."
Marketing
- One hero message: Single value proposition or takeaway above the fold; hierarchy of message, not feature list.
- Emotional vs rational: Decide whether the first beat is emotional pull or rational clarity; align layout and copy.
- CTA prominence: Primary action unmistakable; secondary actions present but not competing.
- Audience fit: Tone and imagery match who it's for; avoid "generic user."
- Brand consistency: One coherent voice and visual system across the artifact.
UX
- Goals and tasks: Design around user goals and key tasks; reduce steps to completion.
- Information architecture: Clear grouping and hierarchy; cognitive load minimal.
- Feedback and state: Every action has visible feedback; loading, success, error states considered.
- Accessibility: Color contrast, focus order, semantics. (Reduced motion: honor
prefers-reduced-motionfor public/multi-user projects; personal projects may ship full motion.) - Progressive disclosure: Show essentials first; detail on demand (expand, modal, step).
Automotive (exterior / interior)
- Silhouette and character: One strong silhouette or "character line"; recognizable at a glance.
- Surface language: Tension, flow, continuity of surfaces (like body panels); avoid arbitrary bumps.
- Proportion: Balance of "cab" (content) to "wheel" (chrome/nav); stable, not top-heavy.
- Materials and trim: Hard/soft, cold/warm, matte/gloss as hierarchy; primary = one material language, accent = another.
- Driver-centric layout: Primary controls and info where the "driver" (user) looks first; secondary in reach but not competing.
- Control hierarchy: One primary action surface; secondary actions grouped and identifiable.
Industrial design
- Form follows function: Shape and layout reflect use; no decoration without reason.
- Material honesty: Materials (or visual equivalent: texture, weight) feel appropriate to the function.
- Affordances: Shape suggests use (clickable, draggable, input); obvious without labels where possible.
- Tactility: Buttons and controls feel "pressable" or "grabbable" (hover/active state, depth).
- Product personality: One clear character (friendly, serious, playful, premium); consistent across the UI.
- Simplify: Remove until it breaks; "best part is no part" for UI clutter.
Limitations
- Use this skill only when the task clearly matches its upstream source and local project context.
- Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
- Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.
FAQ
Common questions
Discussion
Questions & comments · 0
Sign In Sign in to leave a comment.