Stage inputProduct goals, industry questions, and assumptions
AI collaborationCollect sources, compare competitors, and verify key claims
Handoff outputMarket context, competitor patterns, and opportunity list
User Insights
Engineering Feasibility
Business GoalsSession : Build Wow!
/Agent
Fun demo
/Skill
Art & Aesthetics
Visual CraftHCI Research
User ResearchCo-work with AI
AI CollaborationMechanical Eng.
Systems ThinkingProduct Spec
Product StrategyHow Might We...?
Problem FramingJudgment, method, and continuity
The AI Impact
I define the direction, the standard for success, and what counts as finished; AI carries out the work. Proven methods become reusable modules that outlast any single agent or platform.
01
My principles for working with AI
One successful run is not enough. I store proven methods as portable external memory, then adapt the context to reuse them across agents and platforms.
- 01
I set direction; AI speeds up execution
AI gathers, organizes, and executes. I define the problem, success criteria, and verification.
- 02
Borrow a method, then test it myself
I test external skills on real work against established industry criteria.
- 03
Turn successful work into modules
Proven methods become my own skills, SOPs, and example library.
- 04
Build portable external memory
Methods and learning files stay usable when I switch agents or platforms.
02
A composable, continuous AI workflow
The seven stages are working modules that can hand off to one another. I select the stages each task needs while continuing to validate and strengthen the method.
01 / 07
02
User research and requirement definition
I plan the research project, design the interview guide and survey, then organize the transcripts and insights after the interviews.
- AI tools
- Claude, ChatGPT, NotebookLM
- How I use them
- Claude structures the project plan first. ChatGPT then helps design the interview guide and survey. NotebookLM organizes transcripts and research insights after the interviews.
- Workflow skill
research-planTurns research goals, participants, methods, timing, and outputs into an executable plan.interview-guideStructures interview topics, follow-up prompts, and question order around the research questions.thematic-analysisFinds themes, shared patterns, differences, and traceable insights across transcripts.
Stage inputResearch questions, participants, and existing material
AI collaborationPlan → interview guide and survey → transcripts and insights
Handoff outputRequirements, research evidence, and open assumptions
03
Design exploration
I explore feature directions, then select the scenario, MVP, and priority that the design should support.
- AI tools
- Claude, ChatGPT, Gemini
- How I use them
- Generate alternatives and comparison prompts while keeping the final product judgment with me.
- Workflow skill
brainstormUses guided questions to clarify the brief, compare directions, and converge on an executable option.
Stage inputResearch insights, constraints, and success criteria
AI collaborationExplore alternatives, then compare value, cost, and risk
Handoff outputSelected direction, MVP scope, and priorities
04
Flow and interactive prototype
User flows and wireframes turn the chosen direction into an interface that can be inspected and tried.
- AI tools
- Figma, Figma Make
- How I use them
- Build flows, wireframes, and an interactive prototype against the existing design language.
- Workflow skill
Figma workflowBuilds user flows, wireframes, and prototypes in Figma, followed by a visual read-back.
Stage inputSelected direction, task flow, and design constraints
AI collaborationTurn logic into user flows, wireframes, and interaction states
Handoff outputA testable prototype and inspectable interface specification
05
Front-end implementation
An agreed spec becomes small, reviewable Next.js, React, and TypeScript changes.
- AI tools
- Claude Code, Codex
- How I use them
- Implement one bounded batch at a time and preserve unrelated routes and shared contracts.
- Workflow skill
frontend-craftTurns design specifications into maintainable front-end UI and checks responsive, interaction, and visual details.ai-loopKeeps task state, acceptance criteria, and checkpoints shared across multiple AI collaborators.
Stage inputApproved design, behavior specification, and acceptance criteria
AI collaborationImplement in bounded batches while protecting existing contracts
Handoff outputWorking UI, code, and batch-level verification
06
Testing and iteration
Rendered screens, interaction states, and responsive breakpoints expose issues that source review can miss.
- AI tools
- Claude Code, Codex, Playwright
- How I use them
- Run targeted scenarios, inspect browser output, and repair only evidence-backed problems.
- Workflow skill
browseUses a real browser to inspect pages, interactions, console output, and rendered results.rwd-auditChecks layout, text, media, and overflow at defined breakpoints to find responsive issues.
Stage inputWorking product, test scenarios, and success criteria
AI collaborationUse the real interface, record issues, and repair small batches
Handoff outputTest evidence, repair history, and remaining risks
07
Delivery and engineering collaboration
Specifications, tickets, risks, and acceptance evidence keep design and engineering aligned through delivery.
- AI tools
- ChatGPT, Claude, Figma, Storybook, Git
- How I use them
- Package the decision, ownership, and verification state so the next person can continue without guessing.
- Workflow skill
ai-loopKeeps task state, acceptance criteria, and checkpoints shared across multiple AI collaborators.
Stage inputVerified design, code, risks, and decisions
AI collaborationPackage specifications, tickets, owners, and acceptance state
Handoff outputA handoff package the next collaborator can continue from
Composition logic
Choose the starting point and next step from the task at hand
01 → 02 → 03 → 04
Explore from zero
When the market and need are unclear, research and frame the problem before moving into design and prototyping.
04 → 05 → 06 → 07
Move from direction to delivery
When the direction and specification are clear, continue from prototype through implementation, testing, and handoff.
06 → 02 → 03 / 05 → 06
Iterate an existing product
Start with a tested problem, return to requirements, design, or implementation, then verify the revision again.
03
AI collaboration outcomes
An outcome can be a product, skill, job-search workflow, or knowledge system. Each one combines different stages and retains evidence that can be tested again.
Digital product and system
Portfolio and design system
Workflow stages used
0304050607
Skills used
frontend-craftbrowserwd-audit
Custom skill
AI Loop and workflow skills
Workflow stages used
03050607
Skills used
ai-loopskill-creator
Job-search tool
A job-search workflow that adapts to each role
Workflow stages used
01020306
Skills used
company-design-analysisjob-resume-matching
External memory
A LifeOS that continues across agents
Workflow stages used
020607
Skills used
ai-loopjournal
Scroll for next phase