Layers – AI skills for deep product design

Some years ago I wrote a mildly popular article called 'The Elements of Product Design' which broke down modern product design into 7 distinct layers. It was influenced heavily by Jesse James Garret's Elements of UX, hence the name similarity.

The framework seems to help remind designers and their teams that there's more to design than just the visuals: structure and flow, concept modelling, product strategy, domain understanding, user needs.

What's lacking from the article are concrete steps how you might apply the thinking, which was always a bit hard because it's so situational. But with AI, I felt suspected I could give it examples and guidance about each layer and use the LLM's creativity to fill in the blanks.

The result is a set of skills, one per layer, plus an 'Orient' skill to help kick things off.

The idea is to use it as a coach, a sparring partner, or if you're delegating design to AI, to tell it to use the skills to ground the design in the necessary deeper work.

It works quote well in Claude Code, asking it to write to Markdown files, which I view in VS Code with the 'Markdown Preview Mermaid Support' extension.

I tried asking with Figma MCP asking it to diagram in FigJam but the labels overlapped and it wasn't readable. ;( That would be a good next step so you can take over and edit the diagrams more easily, if anyone has some ideas.