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 original (non-replication) work, expect the run to open with a design brief that captures purpose, audience, and register. When no tokens exist yet, it seeds them from register defaults and a starter token file instead of starting from a blank system.
• 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.

ak:ui-ux-pro-max is optional. When it is installed, it adds searchable style, palette, and typography data to the brief. It is never a prerequisite, so the Skill runs without it.

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:

When the brief is silent, the default dials (variance / motion / density, each on a 1–10 range) depend on the register: 7 / 5 / 3 for a Brand surface such as a landing page or portfolio, and 3 / 2 / 6 for a Product surface such as an app, dashboard, or settings screen. Your request, brand assets, and an existing design system override every default.

/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 writes a design brief before any code. It records fixed lines for Register (Brand or Product), Scene, Direction, Color, Type, Signature, and Dials, and keeps them fixed across iterations. For preserve and replicate routes, it fills them from the existing system or the source.
2. The run derives the direction from the Scene. Each line must be justified by the brief or the content rather than a favorite style.
3. The run applies register defaults where the brief is silent. It starts from the existing tokens or the starter token file for the register, then adjusts hue, fonts, and accent to the brief.
4. The run builds from tokens. Every color, size, space, radius, shadow, and duration comes from a token. Before each major section, it compares the plan with a matching pair of tasteful and weak examples.
5. The run completes states and access. Responsive layouts, hover, focus, active, disabled, loading, empty, error, success, reduced-motion, touch-target, contrast, and no-JavaScript visibility requirements are addressed where relevant.
6. The run critiques the rendered result. It runs the bundled render-check script, which captures screenshots and a text layout report at 375, 768, and 1440 px, and fixes every error it reports. It then scores the self-critique rubric, fixes the three weakest items, and repeats for up to three rounds. It reports the final scores and any item below 2, and marks anything it could not render or see as unverified.

Apply product UI patterns and audit live products

The Skill's reference library includes product UI patterns and UX polish standards. Implementation runs consult both when composing and reviewing a screen.

A live-product UX audit points the Skill at a running interface instead of a brief, screenshot, or video; pass the URL as the argument. It uses the product through your browser session at 1440, 768, and 375 px, asks you to sign in yourself when a page needs authentication, and avoids destructive actions such as payments, messages, or deletions. It reports prioritized findings against the product UI patterns and UX polish standards, and implements fixes only when you ask for them.

Older analysis, extraction, and technical reference material was consolidated into two files, asset-pipeline.md and visual-analysis.md. If earlier guidance pointed you to different file names, look for the same material under these two references instead.

Keep external and project effects explicit

• Asset generation normally goes through ak:ai-multimodal. When that is unavailable but a compatible key is already configured, the optional Multix fallback is npx --yes --package=@mrgoonie/multix@latest -- multix. Running it downloads and executes a package, sends prompts and media to an external model provider, uses network access, and writes generated images 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.

Verify the result

A complete implementation should provide:

• The design brief with its selected route, register, and dials, and the token system it built from.
• Exact files changed, assets generated or reused, dependencies changed, and commands or external services used.
• The render-check script's screenshots and text layout report at 375, 768, and 1440 px, 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 final self-critique rubric scores, any item below 2, the rounds it ran, items marked unverified, 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 is mostly reference guidance; it also includes a bundled render-check script. Implementation and verification otherwise 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.
• The self-critique rubric loop, render-check script, product UI patterns, and UX polish standards are the Skill's own guidance and checks, not an independent audit. A live-product UX audit's findings still need human prioritization and an explicit follow-up before they become code changes.