Where I share what I learn at work and the small things from everyday life.
What is Claude Code? Install it and run your first session, no coding needed
A designer's walkthrough for people who have never opened a terminal: what Claude Code is, what you need, installing on macOS and Windows, a safe first session, and fixes for the usual errors. Every command comes from Anthropic's docs.
Working· 2026-10-04
Claude Code for designers: turning a Figma design into a working page
How I use Claude Code as a designer to get from Figma frames to a real, maintained website: what to set up, how to write rules the agent follows, a six-step workflow, and the mistakes I made building this site.
Working· 2026-10-04
What is Claude? A guide for people who have never used AI
Claude is Anthropic's AI assistant. This guide covers what it can do, how the free and paid plans differ, how to run your first conversation, and where Claude tends to get things wrong. Every feature and price was checked against Anthropic's own pages.
Working· 2026-10-04
Claude Code skills: teach Claude to work your way
A skill is a folder with a SKILL.md file that Claude loads when your request matches its description. What skills are, where they live, which frontmatter fields matter, how to build a contrast-check skill for design work, and what to check before installing someone else's.
Working· 2026-10-04
What is DESIGN.md? Letting AI read your design system
DESIGN.md is a Markdown file that describes a design system to AI coding agents: tokens up top, reasoning below. What the format contains, how it differs from Figma variables and CLAUDE.md, and how I run this site on one.
Working· 2026-10-04
How much HTML and CSS should designers learn now?
AI can write the interface. Someone still has to review it. A minimum CSS roadmap for designers, a Figma-to-CSS mapping table, and the checks AI still leaves to you, with examples from this site's code.
Working· 2026-10-04
Figma auto layout explained: Hug, Fill, Fixed and more
What every auto layout setting does, why layouts fall apart, how wrap and grid differ, and how each setting maps to CSS flexbox when the file reaches a developer.
Working· 2026-10-04
Figma components and variants: set them up right
When to use a variant, a component property or a separate component. Naming, nested instances, swapping, the mistakes that bloat a library, and how variants become props in code.
Working· 2026-10-04
What is Figma Make? Prototyping with prompts
Figma Make turns prompts and Figma frames into working, coded prototypes. What it does, how far the free plan goes, how to write a first prompt, and where it still falls short.
Working· 2026-10-04
Figma MCP with Claude Code: getting tokens and components into code
Install the Figma MCP server in Claude Code with one command, then use it to turn variables into CSS tokens and frames into components that follow your project's conventions. Includes rate limits by Figma plan and common failures.
Working· 2026-10-04
Learn Figma from scratch: a 7-day plan for beginners
One skill a day, one 30–60 minute exercise, one thing to show for it. By day seven you have a sign-up screen built from auto layout and components, plus a prototype someone can click through.
Working· 2026-10-04
What is MCP? Connecting Claude to Figma, Slack and Notion
MCP (Model Context Protocol) is the open standard that lets Claude read data from, and act in, the tools you already use. A designer's explanation of the concept, how to add a server to Claude Code with claude mcp add, the three install scopes, and what to check before trusting a server.
Working· 2026-10-04