![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 2 0.999 C 2 1.552 1.552 2 0.999 2 C 0.447 2 0 1.552 0 0.999 C 0 0.447 0.447 0 0.999 0 C 1.552 0 2 0.447 2 0.999 Z M 2 5.999 C 2 6.552 1.552 7 0.999 7 C 0.447 7 0 6.552 0 5.999 C 0 5.447 0.447 5 0.999 5 C 1.552 5 2 5.447 2 5.999 Z M 2 11 C 2 11.552 1.552 12 0.999 12 C 0.447 12 0 11.552 0 11 C 0 10.447 0.447 10 0.999 10 C 1.552 10 2 10.447 2 11 Z M 7.001 1 C 7.001 1.552 6.553 2 6 2 C 5.448 2 5.001 1.552 5.001 1 C 5.001 0.447 5.448 0 6 0 C 6.553 0 7.001 0.447 7.001 1 Z M 7.001 11 C 7.001 11.552 6.553 12 6 12 C 5.448 12 5.001 11.552 5.001 11 C 5.001 10.447 5.448 10 6 10 C 6.553 10 7.001 10.447 7.001 11 Z M 7.001 5.999 C 7.001 6.552 6.553 7 6 7 C 5.448 7 5.001 6.552 5.001 5.999 C 5.001 5.447 5.448 5 6 5 C 6.553 5 7.001 5.447 7.001 5.999 Z M 12 0.999 C 12 1.552 11.552 2 11 2 C 10.447 2 10 1.552 10 0.999 C 10 0.447 10.447 0 11 0 C 11.552 0 12 0.447 12 0.999 Z M 12 5.999 C 12 6.552 11.552 7 11 7 C 10.447 7 10 6.552 10 5.999 C 10 5.447 10.447 5 11 5 C 11.552 5 12 5.447 12 5.999 Z M 12 11 C 12 11.552 11.552 12 11 12 C 10.447 12 10 11.552 10 11 C 10 10.447 10.447 10 11 10 C 11.552 10 12 10.447 12 11 Z" fill="transparent" height="12px" id="gZ_6yT935" transform="translate(6 6)" width="12px"><path d="M 2 0.999 C 2 1.552 1.552 2 0.999 2 C 0.447 2 0 1.552 0 0.999 C 0 0.447 0.447 0 0.999 0 C 1.552 0 2 0.447 2 0.999 Z" fill="rgb(0, 0, 0)" height="2px" id="d76CSTZg5" width="2px"/><path d="M 2 0.999 C 2 1.552 1.552 2 0.999 2 C 0.447 2 0 1.552 0 0.999 C 0 0.447 0.447 0 0.999 0 C 1.552 0 2 0.447 2 0.999 Z" fill="rgb(0, 0, 0)" height="2px" id="nSjpRgRRw" transform="translate(0 5)" width="2px"/><path d="M 2 1 C 2 1.552 1.552 2 0.999 2 C 0.447 2 0 1.552 0 1 C 0 0.447 0.447 0 0.999 0 C 1.552 0 2 0.447 2 1 Z" fill="rgb(0, 0, 0)" height="2px" id="Iyb5VI2nv" transform="translate(0 10)" width="2px"/><path d="M 2 0.999 C 2 1.552 1.552 2 0.999 2 C 0.447 2 0 1.552 0 0.999 C 0 0.447 0.447 0 0.999 0 C 1.552 0 2 0.447 2 0.999 Z" fill="rgb(0, 0, 0)" height="2px" id="cPyEpAAHS" transform="translate(5.001 0)" width="2px"/><path d="M 2 1 C 2 1.552 1.552 2 0.999 2 C 0.447 2 0 1.552 0 1 C 0 0.447 0.447 0 0.999 0 C 1.552 0 2 0.447 2 1 Z" fill="rgb(0, 0, 0)" height="2px" id="lBWIvk_Yk" transform="translate(5.001 10)" width="2px"/><path d="M 2 0.999 C 2 1.552 1.552 2 0.999 2 C 0.447 2 0 1.552 0 0.999 C 0 0.447 0.447 0 0.999 0 C 1.552 0 2 0.447 2 0.999 Z" fill="rgb(0, 0, 0)" height="2px" id="SvL59pmqT" transform="translate(5.001 5)" width="2px"/><path d="M 2 0.999 C 2 1.552 1.552 2 1 2 C 0.447 2 0 1.552 0 0.999 C 0 0.447 0.447 0 1 0 C 1.552 0 2 0.447 2 0.999 Z" fill="rgb(0, 0, 0)" height="2px" id="RQFvPDDI_" transform="translate(10 0)" width="2px"/><path d="M 2 0.999 C 2 1.552 1.552 2 1 2 C 0.447 2 0 1.552 0 0.999 C 0 0.447 0.447 0 1 0 C 1.552 0 2 0.447 2 0.999 Z" fill="rgb(0, 0, 0)" height="2px" id="oxOAeh3nS" transform="translate(10 5)" width="2px"/><path d="M 2 1 C 2 1.552 1.552 2 1 2 C 0.447 2 0 1.552 0 1 C 0 0.447 0.447 0 1 0 C 1.552 0 2 0.447 2 1 Z" fill="rgb(0, 0, 0)" height="2px" id="iZoJk48xe" transform="translate(10 10)" width="2px"/></g></svg>)
Trusted by professionals from
What inside
Step-by-step examples of how to use AI tools at every stage — from defining principles and tokens to auditing and documenting components
01
Design System map
A clear overview of the four phases Define, Create, Adopt, and Evolve showing how AI supports each stage of building and maintaining a system
02
AI Workflows
Step-by-step examples of how AI helps analyze interfaces, generate tokens and components, and document systems more efficiently
03
AI Tools reference
A curated list of tools such as ChatGPT, NotebookLM, and Perplexity, with practical examples of how to use them in daily work
Who it’s for
For designers exploring how AI can strengthen the Design System workflow, from first setup to ongoing maintenance
Starting a Design System
Designers beginning to structure foundations, components, and docs. Shows how AI supports early decisions and helps build a consistent base faster
Improving an existing System
Designers refining or scaling what already exists. Helps identify gaps, automate audits, and keep the system clear and maintainable over time
By subscribing you agree to our privacy policy & cookie policy and to receive marketing and account-related emails from Designsystems.surf. You can unsubscribe at any time.