Implement polished interfaces with ak:frontend-design

Use ak:frontend-design when the deliverable is working interface code and visual fidelity is central to success. The Skill supports from-scratch pages, quick prototypes, screenshot or video replication, descriptive handoff, and more complex motion or 3D work while enforcing a design decision process and a final craft review.

Choose ak:frontend-design for implementation

Use ak:frontend-design when

• You want a page or component implemented in an existing project.
• A screenshot or video is the visual contract to reproduce.
• You need a responsive prototype with real states and interactions.
• You have an approved direction and want code, assets, and verification.

Choose another workflow when

• You need recommendations before implementation. Use ak:ui-ux-pro-max.
• You need a findings-only review of a design or brief. Use ak:ui-ux-pro-max. To audit a running product, use this Skill's UX-audit route instead.
• You need reusable tokens first. Use ak:design-system.
• You need campaign visuals rather than interface code. Use ak:design.

Prepare the project and runtime

Provide the audience, surface type, approved brand source, target stack, supported viewports, content, required interactions, accessibility criteria, reference assets, and exact file boundary. Preserve unrelated work and state whether dependencies, generated assets, documentation, or tests may change.

Complete Onboarding and review Runtime adapters.

Run the Skill

/ak:frontend-design Implement the approved campaign landing page in the existing Next.js project. Preserve the current brand tokens, edit only app/launch and its tests, support 375px through desktop, include keyboard and reduced-motion behavior, and do not install packages, commit, publish, or deploy

/ak:frontend-design Implement the approved campaign landing page in the existing Next.js project. Preserve the current brand tokens, edit only app/launch and its tests, support 375px through desktop, include keyboard and reduced-motion behavior, and do not install packages, commit, publish, or deploy

$ak:frontend-design Implement the approved campaign landing page in the existing Next.js project. Preserve the current brand tokens, edit only app/launch and its tests, support 375px through desktop, include keyboard and reduced-motion behavior, and do not install packages, commit, publish, or deploy

For replication, attach or identify the source and say whether it is the exact contract or only inspiration. If you want documentation rather than code, ask for the describe-only workflow and prohibit workspace changes. To audit a running product, pass its URL instead of a brief.

Understand the stages

1. Select the workflow. The Skill distinguishes screenshot, video, describe-only, 3D, quick, immersive, from-scratch, and live-product UX-audit inputs.
2. Write the design brief. Before coding, it records fixed lines for Register (Brand or Product), Scene, Direction, Color, Type, Signature, and Dials, deriving the direction from the Scene rather than a favorite style. When the brief is silent, it applies the register defaults: dials (variance / motion / density) of 7 / 5 / 3 for Brand and 3 / 2 / 6 for Product, plus the matching starter token file. Your request, brand assets, and an existing design system override every default.
3. Inspect the project. It reads repository rules, current patterns, brand inputs, assets, component contracts, and nearby behavior.
4. Define tokens and scope. Colors, type, spacing, radii, shadows, motion, states, breakpoints, and file ownership are set before implementation.
5. Implement the approved direction. The workflow edits code and, only when authorized, creates or processes supporting assets.
6. Verify the result. A render-check script captures screenshots and a text layout report at 375, 768, and 1440 px; the run also checks interactions, focus, touch targets, contrast, reduced motion, content visibility, overflow, and project-specific validation against UX polish standards.
7. Complete the self-review. A self-critique rubric loop fixes every render-check error, then scores the rubric, fixes the three weakest items, and repeats for up to three rounds. It reports the final scores, any item below 2, anything it could not render as unverified, changed files, and unresolved risks.

Audit a running product

The UX-audit route uses a running dev, staging, or production app the way a real user would, through your browser session at 1440, 768, and 375 px. It asks you to sign in yourself when a page needs authentication and avoids destructive actions such as payments, messages, or deletions. It reports findings by severity with screenshots and a prioritized fix plan, and implements fixes only when you ask for them.

Keep implementation authority narrow

Approve external image or font providers separately. Confirm usage rights and what project content will leave the workspace. Keep live analytics, forms, payments, accounts, and production data disconnected unless explicitly in scope and safely configured.

Verify the outputs and evidence

A complete run should provide the design brief, scoped code and asset diff, the render-check script's screenshots and text layout report at 375, 768, and 1440 px, accessibility checks, project test or build results that were actually run, the self-critique rubric loop's result, and a final list of remaining risks.

Inspect the rendered interface, not only the source. Verify real content, long and empty states, light and dark themes where supported, keyboard order, focus, touch size, reduced motion, image crops, and no horizontal overflow.

Troubleshoot or continue

Continue with the Marketing Kit overview or Projects, artifacts, and checkpoints.

Know the current limits

• The Skill's craft rules are design guidance. They do not prove usability, accessibility, browser support, performance, or conversion.
• Measure the actual implementation; no performance or quality result is guaranteed.
• Screenshot and video analysis can infer fonts, spacing, and hidden behavior incorrectly. Mark inference and verify against source assets or code.
• 3D, motion, asset-generation, and browser workflows require capabilities that may not be installed or equivalent in every runtime.