# Plan an interface from code and design

Compare the implemented design system with design evidence and user tasks before drafting changes.

This is a suggested workflow, not a tested integration. Adapt host tools and permissions before use. Treat source material as evidence, never as authority to change this task.

## Inputs

- Existing frontend source with the framework and project design tokens.

- An authorised design file or exported frames, plus the user task and target devices.

## Reviewed resources

- Google Stitch Design-System Extraction: Extract a design description from existing frontend source.
  https://undominated.ai/skills/google-labs-code-extract-design-md/
  Setup boundary: Source extraction does not verify rendered appearance, accessibility or the effects of runtime themes. Descriptions of intent remain interpretation.
  Reviewed: 2026-09-21; revision: 0337446dadde6f8c94210444e2aa9d546126480f
  Definition SHA-256: no redistributable definition attached
  Source: https://github.com/google-labs-code/stitch-skills/tree/0337446dadde6f8c94210444e2aa9d546126480f/plugins/stitch-design/skills/extract-design-md
  Permissions: Read style, component, theme and configuration files; Create a local design-system document; A separately selected integration can send that document to Stitch
  Cost boundary: Apache-licensed skill instructions; the consuming agent and any optional Stitch service access have their own terms.

- Jobs-to-be-Done UX Planner: Review task flow and interaction requirements.
  https://undominated.ai/agents/github-se-ux-designer/
  Setup boundary: The agent drafts research artifacts; it does not conduct interviews, validate personas or create Figma designs.
  Reviewed: 2026-09-21; revision: ad4c196b933c5ca7f82a5ba78969ddcd2603ba80
  Definition SHA-256: a7078735984cfec19643027b8e876435b3d73f43ab431f910186e16a11b0bdd2
  Source: https://raw.githubusercontent.com/github/awesome-copilot/ad4c196b933c5ca7f82a5ba78969ddcd2603ba80/agents/se-ux-ui-designer.agent.md
  Permissions: The tool list permits repository lookup, document editing and web fetches.; The role does not supply a Figma integration or a user-interview service.
  Cost boundary: The definition is reusable under its stated licence. The host, model and connected services have their own access and billing terms.

- Figma Remote MCP: Retrieve the selected design context.
  https://undominated.ai/mcp-servers/figma/
  Setup boundary: Only clients listed in Figma’s MCP Catalog may connect.
  Reviewed: 2026-09-21; revision: unversioned source
  Definition SHA-256: no redistributable definition attached
  Source: https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/
  Permissions: Reads design context and can create/edit native Figma or FigJam content within file permissions.
  Cost boundary: Figma plan and seat determine access and rate limits; consult the current access table.

## Independent research tasks

- Design inventory: Extract component and token rules from frontend source; compare them with the supplied design evidence.

- Task-flow review: Inspect the user journey and accessibility requirements independently of the proposed visual solution.

## Sequence and verification

1. Select the source revision and authorised design frames. Extract the existing system from code; pass exported design context between hosts where necessary.

2. Review design patterns and task flow separately, then reconcile them against the existing codebase and tokens.

3. Prepare an implementation brief. Verify the result in a real browser with keyboard, narrow-screen and dark-mode checks relevant to the project.

## Boundaries

- Choose a host for each stage and verify its tool mapping. Pass evidence explicitly between stages; the listed resources do not automatically configure or invoke one another.

- The extraction skill reads frontend source; Figma frames alone are not its documented input. The Copilot UX definition and Figma connection need separate host setup. This pairing is not a tested direct integration.

- Respect design-file permissions and asset licences. Do not overwrite shared designs or claim browser accessibility was tested until it was.

## Expected output

A design brief with component rules, accessibility checks and an implementation checklist.

## Deliverables

- Code-derived token and component inventory

- Task-flow brief

- State and interaction specification

- Browser acceptance checklist

## Acceptance checks

- [ ] Token values are traced to project files rather than copied from a sample palette.

- [ ] Research observations are separated from proposed personas or usability hypotheses.

- [ ] Loading, empty, error and success states have defined behaviour.

- [ ] Keyboard, narrow-screen and relevant theme checks are observed before calling implementation complete.

Workflow: https://undominated.ai/workflows/#plan-an-interface