How to ensure UI implementation matches Figma designs using Speckit?

[apurva010]

I’m currently using Speckit to build complete modules (e.g., Auth module, Profile module) by following the
spec -> clarify -> plan -> tasks -> implementation flow.

During the spec, plan, and even the task stage (tasks.md), I provide Figma references, and all the required design details—such as colors, typography, spacing, border radius, etc.—are clearly captured.

However, during the implementation phase, the final UI does not match the Figma design closely.

It seems like:

• Even though all design details are present in task.md, they are not being accurately reflected during implementation
• The design fidelity is getting lost between task definition and actual UI development

I’d appreciate guidance on:

• How to ensure implementation strictly follows the design details defined in task.md
• Best practices to maintain Figma design fidelity throughout the workflow
• Whether additional constraints, validations, or prompt improvements are needed

Has anyone been able to achieve a near pixel-perfect UI using Speckit? Any tips, workflows, or examples would be really helpful.

Ps: I am using Figma dev mode MCP to get the design context.

[mnriem]

How well the fiedlity is kept depends a lot on the model you are using and what you define as testing / exit criteria

[apurva010]

I attempted to develop the same module twice—first using Claude Sonnet 4.6, and then using Claude Opus 4.6 for the second attempt. I have reviewed the md files, and they clearly define all the design-related details, such as which colors to use and where to apply them (e.g., background, border, or text). Similarly, text styles, spacing, and border radius are also well specified.

[mnriem]

Did you ask it to also to gate it with tests? If colors and text styles are important then it must be called out as an exit criterias?Defining them is not enough as LLMs will make choices or skip unless you make it a gating requirement.

[apurva010]

Okay, so do I need to explicitly mention it in the prompt? In which phase? Could you please share some brief details on how to do this and achieve the desired outcome? It would be really helpful to understand this case as well.

[mnriem]

You would do that as part of the specification and review that it funnels along with each step in the process

[apurva010]

Okay, I will try that once.
I have come across this speckit verify extension that will verify the implementation against the specification. What are your thoughts on this?
https://github.com/ismaelJimenez/spec-kit-verify

[173787247]

MCP («How to ensure UI implementation matches Figma designs using Speckit?»)

1. One server, few tools — hosts with 30+ tools will never call yours.
2. Check the host log for spawn errors (Python not on PATH, npx hang, wrong cwd).
3. Config scope: user-level vs project-level duplicates = duplicate tools.
4. STDIO servers must not print to stdout (logs go stderr) or the JSON-RPC stream breaks.

Paste the MCP config JSON (redact env) and the host’s MCP log line.