# Tactile design > A free UI design skill for Claude Code and coding agents. Explore seven interactive before-and-after examples, learn the design decisions and install in one command. By Kosta. Tactile design is a free UI design skill for Claude Code and other coding agents. It gives them rules for layout, typography, surfaces and motion, drawn from the decisions I make in product work. I want an interface to feel considered before you can explain why. You know what you can press. You can tell what belongs together. When something moves, you understand what just happened. Those small decisions are what this skill is for. Every example below has two versions: one built by an agent on its own, one with the skill. Drag the divider and try the controls. Pay attention to what each version asks you to figure out. ## What it covers - **Decisions.** Decide what someone needs to do before choosing how the screen should look. - **Buttons and controls.** Primary, secondary, pills, icon buttons, fields, toggles, switches and badges, with their press, hover, focus, disabled and loading states. - **Surfaces.** Give cards, fields and menus a clear place on the page, with light and dark mode recipes. - **Layout.** Column widths, spacing, where actions go and how much data to show. - **Motion.** Use movement to explain a change. The skill includes timings and springs, and tells the agent when to leave things still. - **Mobile.** Touch targets, type sizes, dialogs as sheets and how a sheet drags. - **Tokens.** Keep your own fonts and colours. Map the rules to your design system. ## Buttons A button makes a promise: you can do something here. Its shape invites the press; its response tells you the interface felt it. The thinking behind the change: - The first version gives you a label and a boundary. In the second, the edge and shadow make the button feel raised, something your finger already knows how to use. - The dark action gives the dialog a clear priority. Cancel stays easy to find without asking for equal attention. - Press and hold. That small give is the point: the button responds before the next screen has anything to say. ## Charts A chart is a way to ask a question of the data. I want the answer to become easier to see as you explore it. The thinking behind the change: - The grid in the first version carries almost as much weight as the data. Lighter dotted guides leave the bars in charge. - Hover a bar, or drag across on your phone. The other hours recede and the value appears beside your attention. You can inspect one moment without losing the day around it. - The current hour pulses because time is the thing changing here. That gives the movement a job. ## Tables A good table lets you settle into a rhythm. Once you understand one row, the next should ask very little of you. The thinking behind the change: - The first version puts a strong border around the information. The second spends more of that visual weight on the headings, where it helps you read. - Aligned figures let you compare values down a column. Stock keeps its label and gains a coloured dot, so the state is easy to pick out. - Scroll the sample store data sideways on a phone. The product name stays with you. You should never have to remember which item a number belongs to. ## Drawers When a sheet follows your hand, you feel in control of it. The moment it stops listening, the interface starts feeling like a sequence you have to sit through. The thinking behind the change: - Try dragging the sheet down. In the tactile version, it follows your finger, then uses the distance and speed of the gesture to decide whether to close. - Change your mind halfway and it returns. A little resistance at the upper edge gives the sheet a limit you can feel. - The page stays visible behind it. You have opened something within the place you were working, and closing it brings you straight back. ## Controls A setting is a small commitment. You change it and expect the product to make the new state unmistakable. The thinking behind the change: - Click through the filters. The moving pill carries the selection from one option to the next, so you can follow the change. - The switch has a thumb that travels and settles. Its position and colour agree about whether it is on. - The badges use colour for status. The rest of the card stays quiet enough for that colour to mean something. ## Dropdowns Opening a menu should feel like reaching into the control you just pressed. That connection matters when the page is already asking you to keep track of a lot. The thinking behind the change: - Open the product picker on either side. In the first, the menu appears at once. In the second, it grows from the button, keeping the choice attached to its source. - The chosen item has a quiet background. You can find your current selection while still reading the alternatives. - The menu leaves a little faster than it arrives. Once you have decided, the interface should get out of the way. ## Inputs Writing takes concentration. A text field should protect it, especially on a phone, where a disappearing keyboard can break your train of thought. The thinking behind the change: - The recessed field gives your words a place to go. Its surface deepens as you type, keeping the attention inside it. - Send the text with Enter. The field clears, but keeps focus so you can carry on. The send action fades when there is nothing left to send. - Both versions use 16px text on touch screens to avoid the automatic zoom smaller fields can trigger on iPhone. Some of the most useful design decisions are the ones you never notice. ## How to install tactile-design Run this command in your project’s terminal and choose your coding agent in the installer: ```sh npx skills add kosta4a/tactile-design ``` Then ask your agent to use tactile-design on a specific screen, for example: “Use tactile-design to improve this billing page.” Or paste this to your agent: ```text Install the Tactile design skill with npx skills add kosta4a/tactile-design, then use it on this project. Go through the UI part by part: buttons, cards, tables, charts, dropdowns and sheets, and make each one feel like something you can actually press. Show me a before and after for each one so I can compare. ``` Source on GitHub: https://github.com/kosta4a/tactile-design ## Questions about the skill ### Is tactile-design free? Yes. The skill and all seven interactive examples are free. You do not need a 4hands account or a purchase to use them. ### Is this a component library? It is a set of design instructions your coding agent reads while working on your project. It guides decisions about layout, controls, surfaces and motion; you do not need to replace your components to use it. ### Can I use my own fonts and colours? Yes. The rules describe relationships: which action gets the most attention, how a control sits on its surface, and how it responds. Apply those relationships with your own typeface, palette and design system. The skill gives your agent the rules. In 4hands, I walk you through the decisions behind them, with lessons and live demos. [Explore the 4hands library](https://4hands.dev) --- The interactive version of this page, with every example built before and after: https://www.4hands.dev/tactile-design