ui_workflow - Figma-Backed UI Implementation Workflow with Governed Design Mapping
Executes a repo-local Figma-backed UI implementation workflow covering design mapping, current-state audit, targeted implementation, layout and visual verification, iteration, and runtime memory management.
Tags
Updated: 2026-06-30Capabilities
Typical Inputs
Typical Outputs
What this skill does
- Resolve UI source from Jira or Figma
- Create canonical implementation brief
- Audit current implementation state
- Implement targeted UI fixes
- Run browser readiness check
- Run layout verification
- Run visual verification
- Review implementation results
- Record iteration outputs in runtime memory
- Capture workflow learnings into repo
- Add Figma nodes to active scope
Inputs
- Jira issue key or ticket
- Figma design link or node
- Browser MCP window with prepared route and role
- Repository-local agent and command files
- Runtime scope directory under ~/.codex/memories/
Outputs
- session.json state file
- source_refs.json design reference file
- brief.md canonical brief
- audit.md current-state audit
- deltas.json implementation delta set
- Iteration record markdown files
- QA verification JSON files
- learnings.md workflow learnings
- Repository code changes
Requirements
- Browser MCP for live page inspection
- Figma MCP for design-source inspection
- Runtime memory directory at ~/.codex/memories/oli-torus-ng/ui-work/
- Human-prepared QA browser window with correct role and route
- Repository-local agent files under .agents/