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, 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.

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 [design request and constraints]

Arguments

[design request and constraints] Required

Design request

Natural-language brief, screenshot/video replication goal, 3D/WebGL request, quick prototype, or description-only task. Include audience, purpose, content, brand assets, framework, editable files, allowed tools, viewport targets, and approval boundaries for packages, generated assets, browser testing, and documentation updates.

/ak:frontend-design "Implement the supplied 1440 px landing-page screenshot in the existing stack. Preserve layout and brand assets, include responsive behavior at 375 px, all interaction states, reduced motion, and a visual comparison. Do not install packages, generate assets, or update design guidelines without approval."

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:
Invoke when visual fidelity and polished UI are primary for a new surface.
Expected:
Shows the Design Read, seeded variation, and aesthetic thesis, defines tokenized OKLCH/type/spacing systems, implements real code, then fixes every Self-Review Gate failure before handoff.
Screenshot replication 
/ak:frontend-design recreate this screenshot as a working component
Use when:
Use when a supplied screenshot is the visual contract to match.
Expected:
Runs the screenshot workflow: analyzes the source with ak:ai-multimodal, plans with the UI design subagent, implements a precise match, verifies against the original, and documents guidelines only if approved.
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.
3D experience 
/ak:frontend-design build a Three.js product hero with subtle motion
Use when:
Use when the request calls for an immersive WebGL or Three.js-style interface.
Expected:
Routes to the 3D/WebGL workflow, treats performance, controls, viewport composition, and reduced-motion as implementation constraints, then reports verified behavior and any known limitations.

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