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

Engineer Kit

/ak:frontend-design

Production frontend interfaces

Create polished frontend interfaces with deliberate art direction from a brief, design, screenshot, or video, and audit running products for UI/UX polish across desktop, tablet, and mobile.

01

Choose the route

02

Write the design brief

03

Apply register defaults

04

Build from tokens

Rule 01

Taste is a procedure, not a mood: brief, tokens, exemplars, then critique the rendered result.

Rule 02

The user's request, brand assets, and existing design system beat every default.

Rule 03

Derive the direction from the scene and content, never from a favorite style.

Rule 04

Judge taste on the rendered page, not on the code.

Rule 05

Never fabricate metrics, testimonials, logos, or functionality; honest placeholders beat invented data.

Execution Map

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

01

Start

Input, scope, route

  1. 1 Choose the route Route to preserve existing UI, new brand surface, new product surface, screenshot or video replication, describe-only, quick prototype, immersive or 3D, or a UX audit of a running product.
  2. 2 Write the design brief Before code, fix the brief lines: register (brand or product), scene, direction with its reason, color strategy in OKLCH, type pair, one signature element, and variance/motion/density dials. Preserve and replicate routes fill them from the existing system or source.
02

Work

Agent / skill execution

  1. 3 Apply register defaults When the brief is silent, use the brand or product defaults for tokens, dials, type scale, color, radius, depth, motion, and layout. User requests, brand assets, and an existing design system always win.
  2. 4 Build from tokens Start from existing tokens or the starter token file for the register. Every color, size, space, radius, shadow, and duration comes from a token; if a value is not on the scale, change the design, not the scale.
03

Verify

Gate, review, validation

  1. 5 Compare with exemplars Before each major section, compare the plan with the matching bad-versus-tasteful pair in the taste exemplars.
  2. 6 Critique and fix Run scripts/render-check.mjs, fix every reported error, score the rubric from 375, 768, and 1440px screenshots, fix the three weakest items, and repeat up to three rounds.
04

Close

Report, handoff, artifact

  1. 7 Meet the quality floor Real content only, complete interaction states, contrast of at least 4.5:1 for body text, 44px touch targets, reduced-motion alternatives, no overflow at any viewport, and passing build and tests.
  2. 8 Report scores Report the final rubric scores and any item below 2, and mark anything that could not be rendered or seen as unverified.

Syntax, arguments, subcommands

How to invoke the skill: syntax, positional arguments, shared options, then each subcommand with its own syntax and outcome.

Syntax

/ak:frontend-design [prompt|image-path|component|url]

Arguments

[prompt|image-path|component|url]

Prompt, image, component, or URL

Optional brief, screenshot or image path, named component, or the URL of a running product to audit. Include audience, purpose, brand assets, stack, viewport targets, and approval boundaries when they change the result.

/ak:frontend-design design and build a distinctive landing page for our observability product

Modes / Routes

Brand surface

New landing or marketing page

Research:
Brief + aesthetic recipes + exemplars
Review:
Brand defaults 7/5/3
Validate:
Rendered critique loop
Product surface

App, dashboard, admin

Research:
Brief + product UI patterns + exemplars
Review:
Product defaults 3/2/6
Validate:
Rendered critique loop
Screenshot

Exact replication

Research:
workflow-screenshot
Review:
Source governs composition
Validate:
Compare to original
Video

Motion replication

Research:
workflow-video
Review:
Match motion and states
Validate:
Compare animation
UX audit

Running product audit

Research:
workflow-ux-audit + polish standards
Review:
Don't make me think
Validate:
Desktop, tablet, mobile

Don't skip the required step

Each item contrasts a tempting shortcut with the required approach.

Tempting shortcut

I like this style, so I will use it.

Do this instead

Derive the direction from the scene and content; a brief line that cannot be justified gets rewritten.

Tempting shortcut

This one-off value looks right.

Do this instead

Every value comes from a token. If it is not on the scale, change the design, not the scale.

Tempting shortcut

The code looks fine, so the UI is fine.

Do this instead

Taste is judged on the rendered page: run render-check.mjs and review 375, 768, and 1440px before handoff.

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:
Invoke when visual fidelity and polished UI are primary for a new surface.
Expected:
Writes the brand design brief, builds from the brand starter tokens, compares sections with the exemplars, then runs render-check.mjs and fixes the weakest rubric items for up to three rounds before reporting scores.
Screenshot replication 
/ak:frontend-design landing-hero.png
Use when:
Use when a supplied screenshot or image path is the visual contract to match.
Expected:
Runs the screenshot workflow: fills the brief from the source, implements a precise match with tokens, and compares the rendered result against the original at each viewport.
Video or motion match 
/ak:frontend-design recreate the interaction in this product demo video
Use when:
Use when the reference is a video and animation fidelity matters.
Expected:
Selects the video replication workflow, extracts timing and effects from the reference, implements motivated motion with reduced-motion handling, and compares the result back to the original sequence.
UX audit of a running app 
/ak:frontend-design https://staging.example.com audit the checkout UX
Use when:
Use when a live dev, staging, or production app needs a hands-on UI/UX polish audit.
Expected:
Follows the UX audit workflow against the polish standards on desktop, tablet, and mobile, and reports ranked findings with evidence; it changes code only when the request asks for implementation.
Named component 
/ak:frontend-design PricingTable
Use when:
Use when a named component, not a whole page, is the surface to design or rebuild.
Expected:
Treats PricingTable as the component contract, inspects existing tokens if present, builds from tokens with complete interaction states, and runs the rendered critique at 375, 768, and 1440px before handoff.

Handled Scope

  • Design briefs and art direction for brand and product registers
  • Token systems in OKLCH with brand and product starter tokens
  • Screenshot and video replication
  • Rendered self-critique with render-check.mjs at 375, 768, and 1440px
  • Hands-on UX audits of dev, staging, and production apps
  • Accessibility, interaction states, and motion craft

Related skills

Next