DesignBeginner to intermediate

Designing Better Frontends with AI

Turn visual references into a DESIGN.md, an asset inventory, and one reviewable vertical slice.

4 min readReviewed Sep 4, 2026Free public access
Table of contents

AI can implement components quickly, but implementation speed is not art direction. A PRD defines behavior; it rarely defines the exact typography, hierarchy, spacing, imagery, responsive rules, and interaction quality that make a product feel intentional.

1. Set the Right Expectation

A coding model may create valid React and still produce generic visual work: repeated white cards, weak hierarchy, excessive gradients, identical rounded corners, placeholder icons, and desktop layouts that collapse badly on small screens. A stronger prompt helps only when it carries concrete design evidence.

The goal is not to ask for a "fancy" interface. The goal is to make design decisions explicit and testable.

2. Humans Still Own Production Assets

Create an asset inventory before implementation. Identify logos, icons, photography, illustrations, diagrams, fonts, legal rights, file formats, responsive variants, and missing assets. References are not production assets. Do not copy copyrighted screenshots, brand marks, or images into the shipped product without permission.

Use ASSETS.md to record the owner, status, intended placement, alternative text, and replacement plan for every important asset.

3. Start with Two or Three References

Choose references for different questions: one for information hierarchy, one for interaction or component behavior, and one for mobile composition. Look at official products, curated design libraries, or mockups generated specifically from your PRD. Record which traits you are borrowing and which you reject.

Do not tell an agent only to copy a screenshot. Screenshots do not reveal semantic structure, breakpoints, focus states, empty states, or legal asset ownership.

4. Write a DESIGN.md Contract

DESIGN.md turns visual intent into repository rules. It should cover audience, experience principles, visual direction, typography, color roles, spacing and grid, borders and shadows, component anatomy, navigation, states, responsiveness, accessibility, motion, assets, do/don't rules, and visual QA.

Be specific enough to review. "Modern and clean" is not a rule. "Body text is at least 16px with a 1.6 line height; primary actions use cobalt; cards do not nest inside cards" is reviewable.

5. Use Component Sources Carefully

shadcn/ui provides accessible building blocks, not a finished brand. shadcn.io is a third-party community directory and should not be labeled official. Magic UI offers motion and effect components that work best as a limited accent. getdesign.md and Aura can help explore direction, but they do not replace your product's design contract.

Audit every copied component for dependencies, licensing, accessibility, responsive behavior, and visual fit.

6. Implement One Vertical Slice

Select one high-value screen and implement it end to end. Include real-length content, loading, empty, error, validation, disabled, hover, focus, and mobile states. Avoid building twenty screens before the first one has passed review.

A useful order is:

text
prioritize screen
-> collect references
-> deconstruct traits
-> review DESIGN.md and ASSETS.md
-> implement one slice
-> capture screenshots
-> perform human visual QA
-> scale the system

7. Prompt the Coding Agent with Constraints

text
Read the PRD, DESIGN.md, ASSETS.md, and existing components.
Implement only the named vertical slice.
Preserve the existing architecture and avoid new dependencies unless necessary.
Include desktop and mobile layouts plus loading, empty, error, and focus states.
After implementation, run checks, capture screenshots, and report the diff.
Do not continue to other screens until this slice is reviewed.

8. Perform Visual QA

Compare screenshots at representative desktop and mobile widths. Check hierarchy, line length, text wrapping, spacing rhythm, alignment, contrast, focus visibility, keyboard order, image crop, overflow, long labels, reduced motion, and dark mode when supported. Test with actual content rather than ideal placeholder strings.

9. Definition of Done

  • The design contract is committed and current.
  • Production assets have owners and rights.
  • One vertical slice works before the system is scaled.
  • All important states are visible and usable.
  • Desktop and mobile screenshots were reviewed.
  • Keyboard focus and contrast are acceptable.
  • The diff contains no unrelated redesign or dependency churn.

Sources and References

Official sources and references

Use these sources to confirm current commands, capabilities, prices, and limits.

Was this guide helpful?

Tell us whether the steps worked or if something needs an update.

Needs an update