01
Goal
Update spacing, type and color.
Make the scope of the style change clear.
PERSONAL WORKFLOW / AI × DESIGN × DELIVERY
AI, in practice.
I use AI to turn
ideas into deliverables.
I bring goals and references; AI works in Figma and in the codebase.
AI syncs master and edits styles. I review the result and give feedback.
GOAL / CONTEXT / EXECUTION / REVIEW / ITERATION
01
Goal
Define the task
Design or styles02
Context
Find the source
Design and rules03
Tools
Use known steps
Terminal + Figma04
Review
Open the output
Check the goal05
Iterate
Point to a change
Refine and check
From a request to something I can open, review and keep improving.
01 / START WITH A CLEAR BRIEF
One request.
Three clear inputs.
Define the task, share the source of truth and say where to deliver.
Give AI a clear direction and a result I can review.
02
Source of truth
Figma + design system + master.
Work from the existing design and code.
03
Delivery location
A Figma node or a code repository.
Return work I can continue to edit.
With the goal, reference and destination in place, AI can get to work.
02 / CONTEXT BEFORE ACTION
Put the rules in place.
Build on what we know.
WORKING CONTEXT
AGENTS.md
Working preferences and project constraints
SKILL.md
Reusable steps for familiar tasks
Project sources
Figma · Design system · Repository contracts
Read what the task needs → Execute
Turn repeated instructions
into lasting context.
AGENTS records constraints. Skills keep proven steps.
AI reads what the task needs and brings my preferences into the work.
Reuse established workflows.
Handle routine details autonomously.
Confirm material changes together.
03 / FROM MASTER TO STYLE CHANGES
Sync the latest master.
Edit styles in the repo.
I bring the goal and references. AI edits styles on a task branch, then returns a clear diff and validation results.
WORKSPACE SCHEMATIC / GHOSTTY + HERDR
CONTEXT / MY INPUT
Sync master. Match styles to Figma.
AGENTS.md + SKILL.md + Design system
AI / CODEX OR DEEPSEEK
Edit styles in the project
master baseline → task branch
Match type, spacing and color to the design.
Reuse existing components and tokens.
Illustrative task · Example pane layout
CHECKS / REVIEW & LOGS
Diff and validation
01 Review the diff
02 Build or verify as needed
03 Return results for feedback
Checks follow the task scope.
CODE WORKFLOW / FROM MASTER TO REVIEWABLE CHANGES
01
Sync master
Start from the latest
master baseline.02
Isolate work
Use a task branch
or isolated worktree.03
Edit styles
Match Figma and the
design system in code.04
Run checks
Review the diff.
Build or verify.05
For review
Return changes and
validation for feedback.
Figma
Designs and existing components
Guide the style changes
Code repository
Sync master → task branch
Edit styles and review the diff
Lark
Requirements, docs and collaboration
Keep delivery and validation records
Ghostty + Herdr workspace schematic · An example pane layout showing my AI workflow.
04 / MODELS & TOOLS
Tools that
work together.
Ghostty opens the terminal; Herdr organizes the workspace. I choose Codex or a DeepSeek-powered agent for the task and connect design, edits and checks.
Tools serve the task.
Keep the familiar Mac setup.
AI sessions / Codex or DeepSeek
Understand code → Edit styles → Check
Design
Figma
Build
Code
Review
Checks
ANOTHER MAC / EXISTING SETUP
Ghostty × Herdr · Existing setup
GhosttyHerdrDeepSeek
05 / REVIEW / FEEDBACK / VERIFY
Review what comes back.
Make the feedback precise.
Point to differences in type, color and spacing. AI revises the code, reviews the diff and runs the relevant checks.
BEFORE / STYLE DRIFT
Component style
Type · Spacing · Color
Primary actionLOCAL
AFTER / MATCH THE DESIGN
Component style
Type · Spacing · Color
Primary actionALIGNED
Review
Give feedback
Revise
Check again
Style alignment schematic / Compare → Revise → Verify
06 / KEEP WHAT WORKS
Finish the work at hand.
Give the next a head start.
Keep confirmed preferences, effective steps and checks in rules and skills. Start the next task with what we have learned.
OUTPUT
This delivery
Open it.
Review it.
Keep editing.
Keep preferences
Record the steps
Keep the checks
SKILL.md
Rules / Reusable workflows
When to use it
Steps to follow
How to verify
Start the next task here.
Put proven practices into rules and skills, and keep improving the workflow.