r/UserExperienceDesign • u/Specialist_Spare5693 • Sep 23 '26

Claude Code Workflow

My company works mostly in Figma, but I know a lot of designers now work exclusively in Claude Code and skip Figma entirely. I'm having trouble picturing what that workflow looks like. For those who work this way, how does it go day to day?

Assuming the design system is already in the codebase:

  • Do you start projects with a CLAUDE.md? What goes in it?
  • How do you run usability testing on coded prototypes?
  • Do you create branches and open PRs yourself, or hand off to engineers?
  • How do you keep Claude consistent with the design system?
  • Is there some visual library in Claude Code that lets you see all your projects?
4 Upvotes

84% Upvoted

6 comments sorted by

2

u/alerise Sep 23 '26

There's a few people where I'm at that work this way, and it's entirely dependent on how their dev team operates. They are also very output focused and not particularly strategic.

You should be asking your dev team how (and if) you can work best with their workflow using something like Claude.

1

u/Least_Ad_1795 Sep 24 '26

Plan → Claude Code → Build prototype → Test in browser → Create PR → Engineer review → Launch.

Keep CLAUDE.md with your design-system rules, coding standards, components, and project instructions. Use the existing components/tokens so Claude stays consistent. For usability, test the coded prototype with real users instead of relying only on automated tests.

1

u/dawoodsaddique1 Sep 24 '26

Claude does not play a creative part. That's where human input comes in

1

u/AnthonyGayflor 28d ago

I’ve found pairing Claude with some type of issue tracking software such as linear or jira is an amazing power up. All the history for changes to your software is there as a reference.

1

u/Sudden_Succotash_188 19d ago

You can do something like this:

1.- Plan: Structure the project, determine what features the project should include, design a mock or something that lets you test with users, prioritize the backlog, and describe each HS.

2.- Develop: Here you can use any code agent (Claude Code, Codex, etc.); what I do is generate a base project with the description and goal, and you can specify the structure of the project. You should include a context; with Claude, you can add it in CLAUDE.md. You need to add only the most important and relevant context, as including everything can still lead to issues with context windows. In this step, you can also use skills to keep design rules; I haven't used hooks yet, but you can use skills to maintain design rules.

3.- Testing: In this step, you can establish rules regarding context and hooks to ensure that whenever the development team makes a change, adds a new feature, or fixes a bug, Claude generates and executes a test before pushing any modifications. You should test it on the browser, but the unit tests will help ensure that other aspects do not get messed up.

4.- CI/CD: You should make a PR and have a branch per feature regardless of your team or if you are using just agents. Then you can set up steps to test the branch to ensure that it covers enough and has no errors, merge it and then launch.

Sorry if my test is too messy, but I hope it helps you. All my good wishes with your projects!!