VividKit Crystal clear AI coding
VI
Choose Your Setup Get Started with AgentKit Continue with ClaudeKit Migrate from ClaudeKit to AgentKit Clean cutover from ClaudeKit What Is AgentKit? How AgentKit Works AgentKit Kits, Skills, Agents & Hooks AgentKit Runtime Support AgentKit Desktop App AgentKit Configuration AgentKit CLI Quick Reference AgentKit Skills Cheatsheet AgentKit Workflows AgentKit Statusline Update AgentKit CLI & Kits AgentKit Helper Clean reinstall of AgentKit AgentKit Troubleshooting What is ClaudeKit? ClaudeKit CLI Guide Command Finder Commands Cheat Sheet Workflow Recipes CLI Quick Reference Claude Mechanics Permission Modes ClaudeKit Hooks Coexistence ClaudeKit x Codex CK → Other coding tools How ClaudeKit Works Inside ClaudeKit Finding Your Unknowns Session Recovery Fix from Logs UI/UX Guide Accounts Switcher IDE Config Remote Control Codex App System Diagramming UI Review Gate Promotions Support VividKit

Quick Ref / Command

Marketing Kit

/ak:frontend-design

Production frontend interfaces

Create polished, distinctive production frontend interfaces from briefs, screenshots, videos, 3D requests, and redesign goals without AI slop.

01

Select Workflow

02

Declare Read

03

Seed Variation

04

Write Thesis

Rule 01

Intentionality beats intensity: bold maximalism and refined minimalism both work.

Rule 02

Tokens first; every value traces to a design scale.

Rule 03

Escalate exactly one dimension to a memorable extreme and discipline the rest.

Rule 04

Brand surfaces need distinctiveness; product surfaces need earned familiarity.

Rule 05

Self-review failures are fixed, not rationalized.

Execution Map

Core lanes from input to output, aligned with the command's real execution path.

01

Start

Input, scope, route

  1. 1 Select Workflow Route screenshot, video, describe-only, 3D/WebGL, quick, complex, or from-scratch requests to the matching workflow.
  2. 2 Declare Read State page kind, audience, vibe language, and aesthetic direction before design defaults can fire.
  3. 3 Seed Variation Derive a seed from the request, pick direction, hero archetype, and component patterns, then avoid recent palette/font repeats.
02

Work

Agent / skill execution

  1. 4 Write Thesis Commit to one aesthetic thesis: palette, type character, layout signature, memorable element, and motif from the content.
  2. 5 Set Tokens Define colors in OKLCH, font families, type scale, spacing, radii, shadows, easing, and one escalated memorable dimension.
  3. 6 Implement Surface Build real working UI with register-aware type, color, depth, motion, states, imagery, copy, layout, grids, and accessibility.
03

Verify

Gate, review, validation

  1. 7 Run Self-Review Mechanically count kickers, banned words, em dashes, layout repetition, spacing scale, contrast, states, motion, and viewport behavior.
  2. 8 Verify Viewports Check actual UI at mobile and desktop, especially 375px for no horizontal scroll and no headline overflow.
  3. 9 Handoff Report context fit, implementation safety, verified viewports, known limitations, and any approved design-guideline updates.

Modes / Routes

Screenshot

Exact replication

Research:
workflow-screenshot + ak:ai-multimodal
Review:
Source is contract
Validate:
Compare to original
Video

Animated replication

Research:
workflow-video
Review:
Motion matches source
Validate:
Compare animation
3D/WebGL

Immersive

Research:
workflow-3d
Review:
Performance and controls
Validate:
Actual surface run
From scratch

Decision procedure

Research:
aesthetic direction menu
Review:
Anti-slop bans
Validate:
Self-review gate

Don't skip the required step

Each item contrasts a tempting shortcut with the required approach.

Tempting shortcut

A centered hero with three cards is safe.

Do this instead

It is explicitly banned as the common AI template. Re-derive layout from the content.

Tempting shortcut

Decorations make it designed.

Do this instead

Decoration is cheaper than design. Delete ornament unless it carries composition or meaning.

Tempting shortcut

The UI looks okay at desktop.

Do this instead

375px must be verified: no horizontal scroll, no overflow, and layout composes rather than shrinks.

Sample Prompt

Concrete invocations for each flag, subcommand, mode, or route available in the live workflow.

From-scratch interface Recommended 
/ak:frontend-design design and build a distinctive landing page for our observability product
Use when:
Visual polish and differentiation matter more than routine implementation.
Expected:
Declares design read, seed, thesis, tokens, implements a real UI, and passes the self-review gate.
Screenshot replication 
/ak:frontend-design recreate this screenshot as a working component
Use when:
The supplied screenshot is the visual contract.
Expected:
Uses multimodal analysis, plans implementation, matches the source, verifies against it, and reports fidelity.
3D experience 
/ak:frontend-design build a WebGL product hero with subtle motion
Use when:
The request calls for an immersive or Three.js-style experience.
Expected:
Routes to the 3D workflow, handles motion and reduced-motion, then verifies performance and viewport safety on the real surface.

Handled Scope

  • Screenshot and video replication with multimodal analysis
  • Distinctive from-scratch web art direction
  • 3D/WebGL and immersive interface routing
  • Typography, OKLCH palettes, motion craft, imagery, interaction states, and accessibility
  • Anti-slop review for copy, layout, surfaces, cards, hero patterns, and viewport behavior

Related skills

Next