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. Use ak:web-design-guidelines.
• 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.

Understand the stages

1. Select the workflow. The Skill distinguishes screenshot, video, describe-only, 3D, quick, immersive, and from-scratch inputs.
2. Declare the design read. Before coding, it identifies the surface, audience, visual language, selected direction, design thesis, and the content source for the form.
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. It checks interactions, focus, touch targets, contrast, reduced motion, content visibility, responsive composition at 375px, overflow, and project-specific validation.
7. Complete the self-review. Countable, binary, and judgment checks remain visible, along with changed files and unresolved risks.

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 read and thesis, scoped code and asset diff, responsive and interaction evidence, accessibility checks, project test or build results that were actually run, 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

• Stable and beta contain byte-identical ak:frontend-design content in the inspected releases.
• The Skill's craft rules are design guidance. They do not prove usability, accessibility, browser support, performance, or conversion.
• References include historical model, cost, timing, and performance wording. Measure the actual implementation; no 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.