From design intent to reviewed code.

Figma to Implementation

Turning a Figma screen into frontend code takes more than matching its appearance. Responsive behavior, interaction states, accessibility, and implementation constraints need decisions of their own.

This workflow connects those decisions to their sources, then carries them through planning, implementation, checks, and human review.

View the workflow on GitHub See the use cases

SourceDesign intent & missing states
PlanRequirements & decisions
CodeImplementation & checks
ReviewEvidence & human acceptance

Why a workflow,
not just a prompt?

A design shows an intended interface. It does not, by itself, establish how that interface works with a keyboard, responds between the supplied screen widths, handles errors, or fits an existing codebase.

The workflow separates what the source demonstrates, what needs a decision, and what must be checked in the browser.

Inspect the source: Define the design scope, record its version or inspection date, and identify missing states and responsive behavior.
Make the result testable: Connect requirements and design intent to a repository-aware implementation plan. Keep documentation proportional to the work.
Implement and review: Track the resulting code, record which checks actually ran, and keep unresolved findings visible.

Three projects.
Different outcomes.

A historically accepted implementation, a review that identified a blocking issue, and a WordPress implementation proposed for further workflow validation. Each result links to its evidence.

myteam

Astro · TypeScript

Historical recorded acceptance

Shared design. Shared behavior.

A supplied three-page design with shared navigation, expandable director profiles, and a contact form. ChatGPT supported planning and documentation; Codex supported implementation.

Browser review exposed Contact text contrast, a cascade-layer problem that hid the submit label, and spacing differences. The recorded implementation corrected and retested those findings.

The final review records 137 passing browser assertions and no recorded failures across routes, responsive layouts, keyboard and focus behavior, navigation, disclosures, and validation. The form validates locally; sending messages was outside scope.

Acceptance applies to the historical reviewed output. A later heading-layout change is outside the same evidence. Dedicated screen-reader testing and formal accessibility conformance are not claimed.

Read the final review Reviewed implementation Validation evidence

Tech Book Club

Astro · Responsive landing page

Corrections required

Matching the design is not enough.

The landing page preserves the supplied design’s structure, typography, imagery, and responsive compositions. Build and responsive checks passed, but the final review found a problem in the hero heading.

Its gradient followed the design while starting at approximately 1.82:1 contrast against the background, below the review’s selected 3:1 threshold for large text. That finding remained open.

The recorded workflow is blocked, even though the page was deployed and its implementation pull request merged. Adjusting the heading and rerunning the relevant checks remain the next steps before final acceptance.

Inspect the finding Implementation pull request

Insure

WordPress · PHP · Block theme

Workflow validation pending

Carry the process into WordPress.

Insure translates a supplied landing-page design into a WordPress block theme: theme settings, block templates, reusable PHP patterns, frontend styles, and editor-style integration.

A WordPress result needs its templates, patterns, settings, and editing behavior to work together. Site Editor overrides and database-managed content can change the rendered result without changing the theme files.

The implementation was verified in the vault’s evidence review. It is a proposed WordPress validation candidate; use of this specific workflow and final acceptance have not yet been established.

A further validation pass would connect an authorized design scope to a specific theme output and the actual WordPress runtime, checking responsive behavior, keyboard access, contrast, and editing behavior.

Explore the theme Project process & credits

An inspectable
result.

The value of the workflow is that the result can be inspected: which source was used, what was implemented, what was checked, and what still needs work.

The toolkit’s separate real-user product acceptance remains pending. These historical and candidate examples do not establish acceptance of its current fully-online ChatGPT experience.

The featured projects use supplied Frontend Mentor challenge designs and assets. They are implementation exercises, with original visual-design credit belonging to the supplied designs.

Explore the workflow documentation

Design through implementation.
Let’s talk.

Back to selected work Download resume