figma-astro

Avoid the visual and structural "tells" that make a UI look AI-generated, and review designs for them. Use when the user says "make it not look AI", "avoid AI look", "review for AI tells", "make this feel handcrafted", or "why does this look generic".

Build a complete page in an existing repository from a Figma frame — read the frame's real geometry, decompose it into sections, reuse the components the repository already has, and emit each section as a component plus its content slice. Use when the user says "build this page from this frame", "build a page from this Figma frame", "turn this frame into a page", "implement this frame as a page", or gives a Figma frame URL and names a repository to build it into. For a single component or a design with no target repository, use design-to-code-workflow instead.

Create and scale component libraries with organization, variants, documentation, and design-token integration for React, Astro, and Vue; for system-wide API contracts, governance, and versioning use design-systems-architecture. Use when the user says "build component library", "create component system", "scale component system", "component library structure", or "component organization".

Build maintainable Tailwind/CSS component styling and close pixel gaps between implementation and design (spacing, color, type, alignment); for viewport/breakpoint layout use responsive-universal-design, and to define the tokens themselves use design-tokens-system. Use when the user says "organize css", "tailwind styling", "pixel perfect", "match the mockup", or "css architecture".

Set up build, CI/CD, preview deploys, quality gates, and hosting for frontend apps (React, Astro, Vue). Use when the user says "set up ci/cd", "deploy this", "github actions", "preview deploys", "build pipeline", "hosting setup", or "release process".

Apply core visual-design fundamentals — hierarchy, layout/grid, color theory, typography, spacing, and contrast/balance — to critique or improve a UI. Use when the user says "improve this design", "design critique", "why does this look off", "visual hierarchy", or "design principles".

Architect a design system at scale — token-layer structure, component API contracts, theming, governance, and versioning — and grow it past 100+ components; author the tokens themselves in design-tokens-system and build the components in component-library-mastery. Use when the user says "design system architecture", "scale design system", "design system governance", "component API design", or "multi-brand theming".

Convert Figma designs and mockups into production-ready React, Astro, or Vue components with Tailwind CSS; for ongoing Figma ↔ code sync and Code Connect use figma-expert-workflows. Use when the user says "implement this figma design", "design to code", "figma to code", "build this design in react/astro/vue", or "turn this mockup into code".

Define and generate a layered design-token system (color, spacing, typography, sizing) wired into Tailwind and CSS variables for theming; for token-layer structure and governance at scale use design-systems-architecture, and for applying them in component CSS use css-styling-pixel-perfect. Use when the user says "design tokens", "token system", "set up tailwind theme", "css variables for design", or "theming tokens".

Establish the generator's memory in a target Astro repository — discover where its conventions are defined, write MAP.md, and capture the first fingerprint. Run once per repository, or again after a restructure. Use when the user says "set up figma-astro here", "initialise the generator memory", "write MAP.md", "fingerprint this repo", or is pointing the generator at a codebase for the first time.

Record what generating a page into the target codebase cost, as a note in the generator's memory. Use when a generation hit a conflict, required rework, or was corrected by a person — and only then; the user says "write that down", "record this decision", "note this conflict", or "why did the generator do that".

Work fluently between Figma and code — extract design context, use Dev Mode, keep design ↔ code in sync with Code Connect, and organize files/variables; for a one-shot implement of a design as components use design-to-code-workflow. Use when the user says "figma workflow", "figma dev mode", "figma code connect", "map figma components", or "design sync".

Choose and apply the right patterns across React, Astro, and Vue — component model, state, data fetching, and the interactivity/hydration boundary. Use when the user says "react vs astro vs vue", "which framework", "astro islands", "component patterns", or "framework best practices".

Design for the full range of users — motion sensitivity, cognitive load, internationalization, user preferences (reduced motion/data, dark mode, text scaling), and diverse inputs — beyond baseline WCAG. Use when the user says "inclusive design", "reduced motion", "internationalization", "cognitive accessibility", "rtl support", or "design for everyone".

Set up frontend QA — unit/component tests, end-to-end flows, and visual-regression snapshots to catch UI drift — for React, Astro, and Vue. Use when the user says "visual regression", "component testing", "e2e tests", "snapshot testing", "chromatic", "playwright", or "test coverage".

Design layouts that work across all viewports and devices with fluid grids, container queries, adaptive typography, and mobile-first breakpoints. Use when the user says "make it responsive", "mobile layout", "breakpoints", "container queries", "fluid typography", or "works on all screens".

Build UI on Next.js with shadcn/ui and Tailwind CSS v4 — component CLI, semantic color/spacing/radius tokens, and dark mode wired to a 1,812-variable Figma registry. Scoped to the Next.js + shadcn/ui stack only; for React/Astro/Vue styling use css-styling-pixel-perfect, for token-layer architecture use design-tokens-system, and for WCAG 2.2 and universal design use web-accessibility-a11y, inclusive-design-patterns and responsive-universal-design. Use when the user says "shadcn", "shadcn/ui", "add a shadcn component", "next.js ui", or names a shadcn primitive to install or restyle.

Audit a component or page for WCAG 2.2 AA accessibility compliance with findings and concrete fixes. Use when the user says "audit accessibility", "check wcag compliance", "is this accessible", "a11y testing", "wcag 2.2", or "accessibility audit".

Profile and optimize frontend rendering, bundle size, and Core Web Vitals (LCP, INP, CLS) for React, Astro, and Vue apps. Use when the user says "optimize performance", "improve core web vitals", "reduce bundle size", "slow page", "lighthouse score", or "web vitals".