Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Design System Checklist Open-source checklist that will help you plan, build and grow your design system. It covers design language, tokens, core components, and maintenance (support and documentation).

101babich's profile picture

Nick Babich

24,399 subscribers

52,116 görüntüleme • 2 yıl önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

Practical guide to creating design systems This guide offers practical tips for product audit, design alignment, creating specs, building components in Figma and defining metrics that will help you measure system success.
0:13

Practical guide to creating design systems This guide offers practical tips for product audit, design alignment, creating specs, building components in Figma and defining metrics that will help you measure system success.

Nick Babich

57,897 görüntüleme • 2 yıl önce

UI design checklist A massive collection of the best practices for everything related to UI design—components, pages, user flows and branding. 🖋️ by George Hatzis
0:10

UI design checklist A massive collection of the best practices for everything related to UI design—components, pages, user flows and branding. 🖋️ by George Hatzis

Nick Babich

71,611 görüntüleme • 2 yıl önce

Introducing support for Design Systems in Bolt Now Bolt uses your actual design system components, not some mimic Here’s how to stop building from scratch and start building on-brand: 👇
0:12

Introducing support for Design Systems in Bolt Now Bolt uses your actual design system components, not some mimic Here’s how to stop building from scratch and start building on-brand: 👇

bolt.new

66,945 görüntüleme • 1 yıl önce

Checklist Design A collection of 50 checklists for UI components, pages and user flows. Each checklist helps you to consider the different states of a component and scenarios when you take a user from A to B. 🖊️ by George Hatzis
0:13

Checklist Design A collection of 50 checklists for UI components, pages and user flows. Each checklist helps you to consider the different states of a component and scenarios when you take a user from A to B. 🖊️ by George Hatzis

Nick Babich

78,566 görüntüleme • 2 yıl önce

finally, AI will be fluent in your design systems and components ...and be able to design and code just like *you* our biggest launch ever coming up - reserve your spot below:
0:16

finally, AI will be fluent in your design systems and components ...and be able to design and code just like *you* our biggest launch ever coming up - reserve your spot below:

Steve (Builder.io)

55,941 görüntüleme • 2 yıl önce

You can now use Figma for FREE with this tool. It's called Penpot. An open-source design tool that mirrors Figma's layout and workflow, free, self-hostable → MCP server lets AI agents edit your designs directly → Free Dev Mode with instant CSS, SVG, and HTML → Native design tokens keep design & code in sync → Real-time collaboration built in 100% Free. Open source.
0:13

You can now use Figma for FREE with this tool. It's called Penpot. An open-source design tool that mirrors Figma's layout and workflow, free, self-hostable → MCP server lets AI agents edit your designs directly → Free Dev Mode with instant CSS, SVG, and HTML → Native design tokens keep design & code in sync → Real-time collaboration built in 100% Free. Open source.

Simplifying AI

56,805 görüntüleme • 2 ay önce

Storybook MCP for React is here 🎉 Storybook MCP gives AI agents structured context from your components and design system to build better UI the first time. 🧵 ⤵
0:19

Storybook MCP for React is here 🎉 Storybook MCP gives AI agents structured context from your components and design system to build better UI the first time. 🧵 ⤵

Storybook

169,560 görüntüleme • 6 ay önce

AI tool that uses your design system to create new components (along with all of the code) 👇
0:13

AI tool that uses your design system to create new components (along with all of the code) 👇

Ridd 🤿

144,769 görüntüleme • 2 yıl önce

Extract any website's design system in one line. Colors, fonts, spacing, components. Formatted as a DESIGN .md your AI agents can use instantly. Built on our Fetch API. Fast, accurate, and structured. Powered by Hyperbrowser ↓
0:16

Extract any website's design system in one line. Colors, fonts, spacing, components. Formatted as a DESIGN .md your AI agents can use instantly. Built on our Fetch API. Fast, accurate, and structured. Powered by Hyperbrowser ↓

Hyperbrowser

23,588 görüntüleme • 4 ay önce

new skill: improve-ui built to audit interfaces against their own design language, inspired by shadcn's improve skill. it reads your repo's design context: DESIGN.md, CSS, shared components, etc. then finds where the UI breaks its own rules and writes a plan to fix it
0:15

new skill: improve-ui built to audit interfaces against their own design language, inspired by shadcn's improve skill. it reads your repo's design context: DESIGN.md, CSS, shared components, etc. then finds where the UI breaks its own rules and writes a plan to fix it

Ibelick

103,374 görüntüleme • 2 ay önce

Must-know open-source tools for coders and makers - open source library of 30 toggles - react gamification ui components - saas starter kit nextjs + tanstack - open source google analytics/ mixpanel alternative - design engineered data visualization components
0:14

Must-know open-source tools for coders and makers - open source library of 30 toggles - react gamification ui components - saas starter kit nextjs + tanstack - open source google analytics/ mixpanel alternative - design engineered data visualization components

Csaba Kissi

48,828 görüntüleme • 3 ay önce

Asked Claude to design me a typography system and, wow
0:14

Asked Claude to design me a typography system and, wow

Nate

47,602 görüntüleme • 4 ay önce

Stop hunting for the perfect tool. Build it! Found an open-source kit and UI library for making your own AI design apps. by Alex Barashkov
0:11

Stop hunting for the perfect tool. Build it! Found an open-source kit and UI library for making your own AI design apps. by Alex Barashkov

Tran Mau Tri Tam ✪

59,693 görüntüleme • 1 ay önce

Open-source template for your management projects. GitHub : Built with shadcn and Linear 's design.
0:13

Open-source template for your management projects. GitHub : Built with shadcn and Linear 's design.

LN

17,509 görüntüleme • 1 yıl önce

You guys love Harness. So we decided to open source it. Our repo includes everything: desktop app, mobile app, firmware, schematic, and 3D industrial design. Time to build your own harness.
0:17

You guys love Harness. So we decided to open source it. Our repo includes everything: desktop app, mobile app, firmware, schematic, and 3D industrial design. Time to build your own harness.

Dee

57,254 görüntüleme • 8 gün önce

Someone just broke the paywall on Claude Design… and almost no one noticed. It’s called Open Design. No subscription. No limits. No “Pro plan required.” Just raw access. 👉 Turn prompts into real UI/UX 👉 Generate designs with Claude 👉 Replace expensive design tools 👉 Fully customizable (open source) This isn’t a tool. It’s a shortcut around the entire design economy. Most people will ignore this. A few will build insane things with it. Guess which side wins. Save this before it explodes Repo:
0:14

Someone just broke the paywall on Claude Design… and almost no one noticed. It’s called Open Design. No subscription. No limits. No “Pro plan required.” Just raw access. 👉 Turn prompts into real UI/UX 👉 Generate designs with Claude 👉 Replace expensive design tools 👉 Fully customizable (open source) This isn’t a tool. It’s a shortcut around the entire design economy. Most people will ignore this. A few will build insane things with it. Guess which side wins. Save this before it explodes Repo:

Leonard Rodman

29,227 görüntüleme • 5 ay önce

I found 9 sites that generate Design Markdown files for your AI builds ! here are the links: - - - - - - - - They help turn your visual direction into an actual design system your coding agent can follow. typography, colors, spacing, radius, shadows, components, states and responsive behaviour. before you build any screen, pick a visual direction and generate the design .md file aligned with your product mechanics and outcome goals add it to Claude Code or Cursor, then use /design to describe what should stay consistent across every screen this gives the agent actual constraints instead of asking it to “make the UI look premium” and hoping for a good output you'll ship much cleaner product ideations at lightning fast speed ! ( this and a folder of 5-6 visual references are the first things we prepare before starting a client build )
0:13

I found 9 sites that generate Design Markdown files for your AI builds ! here are the links: - - - - - - - - They help turn your visual direction into an actual design system your coding agent can follow. typography, colors, spacing, radius, shadows, components, states and responsive behaviour. before you build any screen, pick a visual direction and generate the design .md file aligned with your product mechanics and outcome goals add it to Claude Code or Cursor, then use /design to describe what should stay consistent across every screen this gives the agent actual constraints instead of asking it to “make the UI look premium” and hoping for a good output you'll ship much cleaner product ideations at lightning fast speed ! ( this and a folder of 5-6 visual references are the first things we prepare before starting a client build )

Harshil Tomar

80,784 görüntüleme • 19 gün önce

new Figma plugin in Cursor!! it can inspect your design system, find the right components/variables/styles, then write directly to figma as editable layers
0:11

new Figma plugin in Cursor!! it can inspect your design system, find the right components/variables/styles, then write directly to figma as editable layers

edwin

45,069 görüntüleme • 6 ay önce

Get you an architect who understands MEP well enough that they make models like this as part of the design process 💪 Leaving duct layout or system design to the subs to figure out during construction leads to substandard systems and butchered design!
0:11

Get you an architect who understands MEP well enough that they make models like this as part of the design process 💪 Leaving duct layout or system design to the subs to figure out during construction leads to substandard systems and butchered design!

Marilyn Moedinger

29,150 görüntüleme • 11 ay önce

It was definitely an amazing game after 4 and 5 felt like weaker entries. The use of verticality in the level design and combat system also gives the game some flavor from the typical RPG level design and combat flow.
0:17

It was definitely an amazing game after 4 and 5 felt like weaker entries. The use of verticality in the level design and combat system also gives the game some flavor from the typical RPG level design and combat flow.

Swillo

128,926 görüntüleme • 5 ay önce