adrianricardo

Agent-Friendly Design System Playbook

This is a lightweight pattern for helping agents build faster while keeping product design consistent. It works best for small apps, prototypes, landing pages, and isolated product surfaces where the design system should live close to the implementation.

Core Idea

Give agents a small, explicit design contract before they touch UI code.

The goal is not to create a full enterprise design system. The goal is to remove ambiguity around colors, spacing, radii, motion, layout, and repeatable UI patterns so agents can iterate quickly without inventing a new visual language every turn.

adrianricardo

Build Your Own Brainkeeper

A Brainkeeper is a lightweight operating system for project memory. It gives humans and coding agents one reliable place to put raw context, distill it into current truth, and keep decisions from disappearing into chat history.

This pattern works well for product teams, solo builders, open-source maintainers, research projects, internal tools, and any repo where future contributors need more context than the code can provide.

What the Brainkeeper Maintains

Create a brain/ directory in your repo:

adrianricardo

Design Foundation (Before First Feature)

A spec snippet for new Next.js + Tailwind + shadcn/ui projects. Paste into your spec before the first build so the design system is set up correctly from the start — no retrofit later.

Prerequisite: a style reference doc at the project root (e.g. design.md) with tokens, typography, surfaces, components, and do/don'ts. The reference is the source of truth for visual direction; this foundation is its shadcn/Tailwind implementation. If no reference exists yet, generate one first.

Before writing any page or component code, run the foundation. One session, one commit.

1. Import tokens, then map brand → shadcn

adrianricardo

Design System Retrofit

This file is for you. The file you paste into your AI agent is PROMPT.md.

An idea file for AI coding agents. Give it to Claude Code, Cursor, Codex — it audits your UI for inconsistencies, diagnoses root causes, and builds a phased fix plan custom to your codebase.

How to use

1. Copy PROMPT.md
2. Paste into your AI coding tool at the root of your project

adrianricardo

Verifying my Blockstack ID is secured with the address 15CHHCLuhUrAbCLZfk3kcWLD7WpLtRBVcv https://explorer.blockstack.org/address/15CHHCLuhUrAbCLZfk3kcWLD7WpLtRBVcv

adrianricardo

{
    "_id" : "ZFntLRdps3fcieF3z",
    "emails" : [ 
        {
            "address" : "me@gmail.com",
            "verified" : false
        }
    ],
    "artists" : [ 
        "H5DHAcghzRHHYi8QF",