Design and implement distinctive interfaces with ak:frontend-design

Use ak:frontend-design when visual fidelity and interface craft are the main outcomes. It can analyze references, document a design system, implement working frontend code, create visual assets through companion capabilities, and verify the result against countable design and accessibility checks.

Choose ak:frontend-design for visual outcomes

Use ak:frontend-design when

• You are creating an interface from a brief or reproducing a supplied screenshot or video.
• You need a quick prototype, a production UI, a motion-rich brand surface, or an immersive Three.js experience.
• You want implementation-ready design documentation without changing code.

Choose another workflow when

• The main work is component behavior, data flow, routing, or application state. Use ak:frontend-development and bring this Skill in for visual decisions.
• You need framework-specific routing, rendering, or deployment guidance. Use ak:web-frameworks.
• You only need to generate or edit a standalone image. Use the available image generation or media-processing capability directly.
• You do not have permission to reproduce the supplied design or assets. Obtain permission or design from an original brief instead.

Prepare the brief and visual tools

Before you start:

• Complete Onboarding, and confirm Engineer Kit is installed for the current runtime and scope.
• Provide the audience, page or product purpose, required content, brand assets, existing design tokens, framework, supported browsers and devices, and the files that may be edited.
• For replication, attach high-quality source media and identify the viewport, responsive states, interaction states, and whether the goal is preservation or an approved redesign.
• For asset generation or analysis, make ak:ai-multimodal and its provider access available. Post-processing uses ak:media-processing; 3D work also requires ak:threejs and a WebGL-capable target.
• Decide whether network calls, package downloads, generated images, browser testing, and project-documentation updates are allowed before the run starts.

Some referenced workflows name ak:ui-ux-pro-max and specialist subagents as prerequisites. They are not bundled inside this Skill directory. If the current installation does not expose them, treat that workflow step as blocked or use an explicitly approved equivalent; do not imply it ran.

Select a workflow

The Skill declares no positional argument schema, flags, or default input. Pass the design request and constraints in natural language. It selects a workflow from the input:

For a from-scratch request, the default design dials are DESIGN_VARIANCE=8, MOTION_INTENSITY=6, and VISUAL_DENSITY=4, each on a 1–10 range. Surface presets can replace them, and the user can override them.

/ak:frontend-design "Implement the supplied 1440 px landing-page screenshot in the existing stack. Preserve its 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."

/ak:frontend-design "Implement the supplied 1440 px landing-page screenshot in the existing stack. Preserve its 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."

$ak:frontend-design "Implement the supplied 1440 px landing-page screenshot in the existing stack. Preserve its 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."

Observe the design workflow

1. The run declares its design read. It identifies the surface, audience, physical context, brand or product register, and one clear aesthetic direction.
2. The run derives rather than defaults. For original work, it uses the request-derived seed, selects or justifiably adjusts a direction, states an aesthetic thesis, and names the content source of its form.
3. The run defines tokens first. Color, typography, type scale, spacing, radii, depth, easing, density, and motion are established before components.
4. The run plans and implements. Reference replication treats the source as the contract; original work escalates exactly one visual dimension and keeps the others disciplined.
5. The run completes states and access. Responsive layouts, hover, focus, active, disabled, loading, error, reduced-motion, touch-target, contrast, and no-JavaScript visibility requirements are addressed where relevant.
6. The run verifies before delivery. It compares reference media, tests at 375 px, counts banned patterns, checks contrast, and reports evidence and unresolved gaps.

Keep external and project effects explicit

• The referenced Multix examples use npx -y -p @mrgoonie/multix@0.2.0. Running them downloads and executes a package, sends prompts and media to an external model provider, uses network access, and writes generated images or analysis reports to disk.
• Generated or supplied media can contain private, licensed, or identifying material. Confirm processing rights and avoid sending sensitive assets to a provider without authorization.
• Package installs, Three.js, Anime.js, Motion, GSAP, fonts, and image assets can change dependencies, bundle size, loading behavior, GPU or CPU use, memory, accessibility, and browser compatibility. Reuse the project stack unless a dependency change is approved.
• Updating docs/design-guidelines.md is an explicit repository change and only follows an approved design. The Skill must not assume that file exists or is within scope.

The bundled reference projects image operations at about 5–10 seconds for a fast generation, 10–20 seconds for standard, 20–30 seconds for ultra, and 2–5 seconds for analysis. It also lists historical approximate costs of $0.02, $0.04, $0.08, and $0.001 respectively. These are reference estimates, not current prices or service-level guarantees; verify the active provider and model before spending. Implementation, browser comparison, video analysis, and 3D optimization have no fixed duration.

Verify the result

A complete implementation should provide:

• The design-read declaration, selected workflow and dials, aesthetic thesis, token system, and the one deliberately escalated dimension.
• Exact files changed, assets generated or reused, dependencies changed, and commands or external services used.
• Screenshots or comparisons at the requested viewports and states, plus responsive, interaction, reduced-motion, and no-JavaScript evidence.
• Contrast results for actual backgrounds, font and language coverage, image optimization, alt text, performance observations, and known browser gaps.
• The Skill’s mandatory countable and binary self-review results, followed by any judgment calls, skipped checks, and approval still required.

An analysis-only result should instead provide actionable colors, typography, spacing, layout, components, states, motion, accessibility, uncertainties, and implementation notes without claiming code or visual QA was completed.

Troubleshoot or continue

Review Projects, artifacts, and checkpoints before a large visual change or continue with Engineer Kit.

Know the current limits

• This Skill contains reference guidance only; it has no bundled executable or test suite. Implementation and verification depend on the repository and the tools available in the runtime.
• Several reference examples and model names are point-in-time guidance, and some referenced file names or companion capabilities are not present inside this Skill directory. Verify availability rather than assuming them.
• Visual-model ratings and inferred measurements are not proof of pixel parity, WCAG compliance, usability, performance, or originality. Use measured checks and human review for those claims.
• Stable and beta contain identical Skill guidance for this release pair.