docs: add English blog post on Figma-to-code visual validation#265
docs: add English blog post on Figma-to-code visual validation#265rubenmarcus wants to merge 2 commits intomainfrom
Conversation
SEO-optimized English article targeting international developer audience. Covers the three-layer visual validation pipeline, Figma wizard, extraction capabilities, and multi-agent support. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Issue Linking ReminderThis PR doesn't appear to have a linked issue. Consider linking to:
Using If this PR doesn't need an issue, you can ignore this message. |
Greptile SummaryThis PR adds a single English-language, SEO-optimised blog post ( Key issues found:
Confidence Score: 2/5
Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[ralph-starter figma] --> B[Interactive Wizard\nURL · description · stack · model]
B --> C[Figma API extraction\ntypography · colors · spacing · assets]
C --> D[AI Agent coding loop\nwrite → lint → build → commit]
D --> E[Layer 1: pixelmatch\npixel diff < 2%?]
E -->|Yes| F[✓ Visual validation passed]
E -->|No - diff ≥ 2%| G[Layer 2: LLM vision analysis\nFigma screenshot + impl screenshot + diff overlay]
G --> H[Agent applies fixes]
H --> I[Layer 3: Strict pixelmatch gate\npixel diff < 2%?]
I -->|Yes| F
I -->|No| G
Last reviewed commit: 83c3c22 |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
|
|
||
| ## References | ||
|
|
||
| - [Figma wizard CLI docs](/docs/cli/figma) |
There was a problem hiding this comment.
Broken internal link will fail the build
The link /docs/cli/figma points to a page that does not exist. Scanning the repository shows only these files under docs/docs/cli/: auth.md, auto.md, check.md, config.md, fix.md, init.md, integrations.md, plan.md, presets.md, run.md, setup.md, skill.md, source.md, task.md, template.md. There is no figma.md.
Because docusaurus.config.ts sets onBrokenLinks: 'throw', this broken link will cause pnpm build to fail, directly blocking the test-plan item "pnpm build in docs/ passes".
Either create the missing docs/docs/cli/figma.md page, or replace the link with the existing Figma integration page that does exist:
| - [Figma wizard CLI docs](/docs/cli/figma) | |
| - [Figma integration guide](/docs/sources/figma) |
Prompt To Fix With AI
This is a comment left during a code review.
Path: docs/blog/2026-03-07-figma-to-code-visual-validation.md
Line: 160
Comment:
**Broken internal link will fail the build**
The link `/docs/cli/figma` points to a page that does not exist. Scanning the repository shows only these files under `docs/docs/cli/`: `auth.md`, `auto.md`, `check.md`, `config.md`, `fix.md`, `init.md`, `integrations.md`, `plan.md`, `presets.md`, `run.md`, `setup.md`, `skill.md`, `source.md`, `task.md`, `template.md`. There is no `figma.md`.
Because `docusaurus.config.ts` sets `onBrokenLinks: 'throw'`, this broken link **will cause `pnpm build` to fail**, directly blocking the test-plan item "pnpm build in docs/ passes".
Either create the missing `docs/docs/cli/figma.md` page, or replace the link with the existing Figma integration page that does exist:
```suggestion
- [Figma integration guide](/docs/sources/figma)
```
How can I resolve this? If you propose a fix, please make it concise.| authors: [ruben] | ||
| tags: [ralph-starter, figma, visual-validation, design-to-code, tutorial] | ||
| description: "Convert Figma designs to production-ready code with pixel-by-pixel visual validation. ralph-starter v0.4.0 introduces a three-layer comparison pipeline that catches layout, color, and typography mismatches automatically." | ||
| image: /img/blog/figma-to-code.png |
There was a problem hiding this comment.
Duplicate OG/social image with existing Figma post
The existing blog post 2026-02-01-figma-to-code-one-command.md already uses image: /img/blog/figma-to-code.png. When both posts are shared on social media (Twitter/OG cards), they will show identical preview images, making them visually indistinguishable and reducing click-through differentiation.
Since this post covers a distinct topic (the three-layer visual validation pipeline in v0.4.0), consider adding a new unique image, for example:
| image: /img/blog/figma-to-code.png | |
| image: /img/blog/figma-visual-validation.png |
Prompt To Fix With AI
This is a comment left during a code review.
Path: docs/blog/2026-03-07-figma-to-code-visual-validation.md
Line: 7
Comment:
**Duplicate OG/social image with existing Figma post**
The existing blog post `2026-02-01-figma-to-code-one-command.md` already uses `image: /img/blog/figma-to-code.png`. When both posts are shared on social media (Twitter/OG cards), they will show identical preview images, making them visually indistinguishable and reducing click-through differentiation.
Since this post covers a distinct topic (the three-layer visual validation pipeline in v0.4.0), consider adding a new unique image, for example:
```suggestion
image: /img/blog/figma-visual-validation.png
```
How can I resolve this? If you propose a fix, please make it concise.| ## Try it | ||
|
|
||
| ```bash | ||
| npm install -g ralph-starter@latest | ||
| ralph-starter figma | ||
| ``` | ||
|
|
||
| Or without installing: | ||
|
|
||
| ```bash | ||
| npx ralph-starter figma | ||
| ``` |
There was a problem hiding this comment.
Missing Figma API token setup step
The "Try it" section shows ralph-starter figma as a one-liner, but the wizard needs a Figma Personal Access Token to call the Figma API. The existing blog post 2026-02-01-figma-to-code-one-command.md (and the Figma integration docs) include the token setup step:
ralph-starter config set figma.token figd_your_token_hereWithout this prerequisite, readers who follow the post verbatim will hit an authentication error the first time the tool calls the Figma API. Consider adding a brief note or an admonition (e.g. :::tip) pointing out that a Figma Personal Access Token is required and linking to the integration guide for setup instructions.
Prompt To Fix With AI
This is a comment left during a code review.
Path: docs/blog/2026-03-07-figma-to-code-visual-validation.md
Line: 133-144
Comment:
**Missing Figma API token setup step**
The "Try it" section shows `ralph-starter figma` as a one-liner, but the wizard needs a Figma Personal Access Token to call the Figma API. The existing blog post `2026-02-01-figma-to-code-one-command.md` (and the Figma integration docs) include the token setup step:
```bash
ralph-starter config set figma.token figd_your_token_here
```
Without this prerequisite, readers who follow the post verbatim will hit an authentication error the first time the tool calls the Figma API. Consider adding a brief note or an admonition (e.g. `:::tip`) pointing out that a Figma Personal Access Token is required and linking to the integration guide for setup instructions.
How can I resolve this? If you propose a fix, please make it concise.![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 83c3c22316
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
|
||
| ## References | ||
|
|
||
| - [Figma wizard CLI docs](/docs/cli/figma) |
There was a problem hiding this comment.
This link points to a route that does not exist in the docs tree, so readers clicking “Figma wizard CLI docs” will land on a 404 instead of command documentation. I checked docs/docs/cli/ and there is no figma doc page (only files like run.md, source.md, etc.), so this should be updated to an existing target.
Useful? React with 👍 / 👎.
Changed /docs/cli/figma to /docs/sources/figma — the cli/figma page does not exist, the Figma documentation lives under sources. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
🔗 Docs PreviewPreview URL: https://content-english-blog-v040.ralph-starter-docs.pages.dev This preview was deployed from the latest commit on this PR. |
1 participant
Summary
Test plan
/blog/figma-to-code-visual-validationpnpm buildin docs/ passes🤖 Generated with Claude Code