Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

⚡️Introducing ion design (YC W24)⚡️ We instantly turn Figma designs into clean React code. We're already speeding up businesses by ~40% ion saves thousands of hours by: - Learning structure from your codebase - Reusing your existing components - Automatic dark mode 🌙 (1/4)

Samraaj Bath ⚡️

2,554 subscribers

160,724 Aufrufe • vor 2 Jahren •via X (Twitter)

Wissenschaft & Technologie

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von Samraaj Bath ⚡️

Samraaj Bath ⚡️vor 2 Jahren

We accomplish this thru our design system - 5,000+ Figma components built with love. It comes with everything you need to build beautiful products quickly, neatly, and consistently. The first 100 get it for just $10 (codegen not included): (2/4)

Profilbild von Samraaj Bath ⚡️

Samraaj Bath ⚡️vor 2 Jahren

Our goal is to speed up product teams & ensure engineers stop wasting time monotonously writing CSS Designers and frontend engineers shouldn’t be repeating work - there should be harmony in the handoff Sign up for early access here: (3/4)

Profilbild von Samraaj Bath ⚡️

Samraaj Bath ⚡️vor 2 Jahren

We’re super excited to bring a new way of building products to the world. At the least, we hope to make you smile :). Follow @samraaj and @iondotdesign to get updates. (4/4)

Profilbild von Ibrahim Ahmed

Ibrahim Ahmedvor 2 Jahren

such a beautiful landing page -- congrats on the launch!!

Profilbild von Samraaj Bath ⚡️

Samraaj Bath ⚡️vor 2 Jahren

Appreciate it! @jeffwongdesign went off with it :)

Profilbild von sucks

sucksvor 2 Jahren

amazing. now please automate the figma designs

Profilbild von Samraaj Bath ⚡️

Samraaj Bath ⚡️vor 2 Jahren

@SiddDevs you on it sir

Profilbild von Philipp Tsipman

Philipp Tsipmanvor 2 Jahren

Excited for this! @shadcn congrats on being at the top :-)

Profilbild von Samraaj Bath ⚡️

Samraaj Bath ⚡️vor 2 Jahren

@shadcn :) hope you’ve been well Philipp! emailing you

Profilbild von Arnav Bathla

Arnav Bathlavor 2 Jahren

🚢🚢💪

Ähnliche Videos

re-introducing ion design (YC W24) we turn designers into design engineers without them learning how to code ⚡ it’s an AI app builder that turns Figma into code - generate, iterate, and ship in seconds. let's make 2025 the year of the design engineer, together 🧵

re-introducing ion design (YC W24) we turn designers into design engineers without them learning how to code ⚡ it’s an AI app builder that turns Figma into code - generate, iterate, and ship in seconds. let's make 2025 the year of the design engineer, together 🧵

Samraaj Bath ⚡️

29,930 Aufrufe • vor 1 Jahr

Introducing Bifrost, a tool that uses AI to turn anything from Figma into clean React code automatically. How it works: - Generates usable code for anything in Figma - Drops the code directly into your code editor - Learns how to structure code just like yours 1/4

Introducing Bifrost, a tool that uses AI to turn anything from Figma into clean React code automatically. How it works: - Generates usable code for anything in Figma - Drops the code directly into your code editor - Learns how to structure code just like yours 1/4

kartik

756,127 Aufrufe • vor 3 Jahren

Claude Code is terrible at UI design and everyone knows it so this guy fixed it by building an MCP that gives Claude its own AI design tool instead of going back and forth between a design platform and your code editor, Claude now creates the designs itself and drops them straight into your codebase the MCP has full context of your existing design system and project so everything it generates actually matches what you already have. one command to set up and it installs the MCP and skill files so Claude instantly knows how to use it if you're tired of the same Inter font, purple gradient, card grid layout on every project, this is definitely worth trying

Claude Code is terrible at UI design and everyone knows it so this guy fixed it by building an MCP that gives Claude its own AI design tool instead of going back and forth between a design platform and your code editor, Claude now creates the designs itself and drops them straight into your codebase the MCP has full context of your existing design system and project so everything it generates actually matches what you already have. one command to set up and it installs the MCP and skill files so Claude instantly knows how to use it if you're tired of the same Inter font, purple gradient, card grid layout on every project, this is definitely worth trying

Om Patel

398,097 Aufrufe • vor 3 Monaten

figma "god mode" just leaked.. this week i tried the future of autonomous design: claude connected directly to the figma api with full edit access.. yes it can design in figma what does it mean? you prompt, it designs. it’s like having a team of designers inside figma working with you and 10x ing your capacity why is this different? official figma ai/mcp only "reads" files to help devs. this tool (unofficial MCP) "writes" in figma to replace manual labor. hours of grinding turned into seconds of waiting imagine this: - prompt to design: generate a new screen based on your design or not - prompt to flow: generate end to end user journeys - iteration: create multiple variations in one click - design system: it can use your components to create new screens - zero click management: auto layout, component creation, deduplication handled by prompt - universal control: if you can do it in figma, it can do it for you the impact if figma officially releases this, almost every existing plugin becomes obsolete overnight it feels like figma on steroids. i’m still processing whether i feel empowered or replaced full tutorial in this article from Mark A. Cianfrani. handle with care: ai will have access to everything in figma »

figma "god mode" just leaked.. this week i tried the future of autonomous design: claude connected directly to the figma api with full edit access.. yes it can design in figma what does it mean? you prompt, it designs. it’s like having a team of designers inside figma working with you and 10x ing your capacity why is this different? official figma ai/mcp only "reads" files to help devs. this tool (unofficial MCP) "writes" in figma to replace manual labor. hours of grinding turned into seconds of waiting imagine this: - prompt to design: generate a new screen based on your design or not - prompt to flow: generate end to end user journeys - iteration: create multiple variations in one click - design system: it can use your components to create new screens - zero click management: auto layout, component creation, deduplication handled by prompt - universal control: if you can do it in figma, it can do it for you the impact if figma officially releases this, almost every existing plugin becomes obsolete overnight it feels like figma on steroids. i’m still processing whether i feel empowered or replaced full tutorial in this article from Mark A. Cianfrani. handle with care: ai will have access to everything in figma »

Aurelien

78,970 Aufrufe • vor 5 Monaten

Every frontend developer just stopped opening DevTools. Your AI coding agent can now reverse-engineer the entire design system of any website directly from the terminal. Just type: /design And it instantly extracts: • Brand colors • Fonts & typography • Spacing system • Buttons & UI components • Layout patterns • Design tokens Then saves everything into a structured DESIGN.md file your AI agent can understand and reuse. Powered by Hyperbrowser + Claude Code MCP. The crazy part? You can now study, replicate, and rebuild world-class UI systems in minutes instead of wasting hours manually inspecting websites. This changes how vibe coding works forever. Repo👇

divyansh tiwari

78,201 Aufrufe • vor 1 Monat

After testing every AI toolchain for a year, this is the only workflow I'm endorsing: Figma → Claude Code (Sonnet 4.5) Here's how I'm building Lorelight: 1. Design the happy path in Figma 2. Feed it to Claude Code via Figma MCP 3. Get a strong foundation in 15 minutes 4. Spend the next 50+ hours iterating (still design work) The design/dev loop that used to be isolated is finally closing. I even built a complete design system in within minutes. Custom components, living documentation, accessibility rules all from the Figma designs. If you're measuring the effectiveness of these tools by whether they can "one-shot" a design, you're consuming too many AI hype commercials. Log off. Then go actually build something with your hands. With AI. With your taste. Stop trying to "one-shot" good shit. And go make stuff with the new tools. For designers who want to ship real products, this is the stack that's getting it done.

After testing every AI toolchain for a year, this is the only workflow I'm endorsing: Figma → Claude Code (Sonnet 4.5) Here's how I'm building Lorelight: 1. Design the happy path in Figma 2. Feed it to Claude Code via Figma MCP 3. Get a strong foundation in 15 minutes 4. Spend the next 50+ hours iterating (still design work) The design/dev loop that used to be isolated is finally closing. I even built a complete design system in within minutes. Custom components, living documentation, accessibility rules all from the Figma designs. If you're measuring the effectiveness of these tools by whether they can "one-shot" a design, you're consuming too many AI hype commercials. Log off. Then go actually build something with your hands. With AI. With your taste. Stop trying to "one-shot" good shit. And go make stuff with the new tools. For designers who want to ship real products, this is the stack that's getting it done.

Tommy Geoco

22,905 Aufrufe • vor 9 Monaten

🚨 Electrical engineers are going to hate this. Someone just turned React into a circuit board factory. Write code. Get a real PCB manufactured and delivered to your door. It's called tscircuit. React for Electronics. No Altium. No $10,000/year licenses. No 6-month learning curve. You write React components. But instead of and , you write , , and . The same way you build a website. That's how you build a circuit board now. Here's what this thing actually does: → Design real circuit boards using TypeScript and React → Edit code in your IDE, watch the circuit update in real time → Auto-generates schematics, PCB layouts, and 3D previews from your code → Automatic part selection and bill of materials generation → Built-in autorouting algorithm for PCB traces → Export to Gerber files and send directly to a manufacturer → Online playground. Design circuits in your browser right now. Here's the wildest part: The creator wrote 40 lines of TypeScript. From that he got a full PCB, a schematic, and a 3D preview. Then he exported it, sent it to a manufacturer, and got a real working circuit board delivered. 40 lines of code. A real physical product. This is free. Write React. Get hardware. $20K+ in bounties already paid to contributors. 8 years in the making. 100% Open Source. MIT License.

🚨 Electrical engineers are going to hate this. Someone just turned React into a circuit board factory. Write code. Get a real PCB manufactured and delivered to your door. It's called tscircuit. React for Electronics. No Altium. No $10,000/year licenses. No 6-month learning curve. You write React components. But instead of and , you write , , and . The same way you build a website. That's how you build a circuit board now. Here's what this thing actually does: → Design real circuit boards using TypeScript and React → Edit code in your IDE, watch the circuit update in real time → Auto-generates schematics, PCB layouts, and 3D previews from your code → Automatic part selection and bill of materials generation → Built-in autorouting algorithm for PCB traces → Export to Gerber files and send directly to a manufacturer → Online playground. Design circuits in your browser right now. Here's the wildest part: The creator wrote 40 lines of TypeScript. From that he got a full PCB, a schematic, and a 3D preview. Then he exported it, sent it to a manufacturer, and got a real working circuit board delivered. 40 lines of code. A real physical product. This is free. Write React. Get hardware. $20K+ in bounties already paid to contributors. 8 years in the making. 100% Open Source. MIT License.

Nav Toor

380,426 Aufrufe • vor 3 Monaten

HE TURNED A $9,000 UI HANDOFF INTO A 3D SAAS INTERFACE IN 30 MINUTES this guy didn’t build another flat dashboard, he built a living 3d workspace with Claude Code reading the structure, logic and components instead of guessing from screenshots Moonchild makes the design system first: tokens, spacing, cards, charts, navigation, typography, then Claude turns it into a working React app through MCP 2 tools, 1 design system, 8+ screens and a second Claude checking drift while most founders still pay agencies to align buttons by hand save the full breakdown before your next SaaS looks like 6 templates fighting for custody of the same logo ↓

Gipp 🦅

11,008 Aufrufe • vor 1 Monat

Figma Capture + Claude Fable 5 = clone any competitor's landing page in minutes 🤯 Figma just dropped a Chrome extension that copy/pastes any live website into Figma as editable layers. Point Claude Code — running the new Fable 5 model — at the capture, and it rebuilds the whole page in YOUR brand: structure, copy, design system, photography. All inside Claude Code. Perfect for DTC brands and agencies who keep losing weeks rebuilding proven landers from scratch. If you're still cloning competitor pages the old way, You're screenshotting their site and praying the AI guesses the structure right. You're rebuilding sections by hand because the fonts and spacing never come out true. You're paying a designer $3K to recreate a page that already exists. This workflow eliminates the entire loop: → Capture the competitor's landing page with Figma's new Chrome extension — editable layers, not screenshots → Claude Code reads the page structure through the Figma MCP: every section, every headline, in order → It rebuilds the page in YOUR brand — your colors, your fonts, your voice (it even respects your banned-words list) → GPT Image 2 generates on-brand product photography from the layer names → Claude places every image automatically — finished page, ready to ship No screenshots. No guessing at structure. No design invoice. What you get: → A pixel-structured clone of any proven lander, rebuilt in your brand → Every line of copy rewritten in your voice → 16 on-brand images generated and placed for ~$2 in API costs → Start to finish in about 15 minutes Built 100% with Figma + Claude Code on Claude Fable 5. I put together a step-by-step playbook showing you exactly how to set it up. Want access for free? > Like this post > Comment "CLONE" And I'll send it over (must be following so I can DM)

Mike Futia

46,198 Aufrufe • vor 1 Monat

Introducing primeui. Build sites fast. Fear no code. Available today • 200+ handcrafted marketing UI components and templates • Sitemap planner • Prototype + experiment on an infinite canvas • Clean export to Next.js, Tailwind + shadcn/ui compatible • Not just landing pages: build Blog, Docs, Pricing, and more Coming soon • MCP • Skills • AI Designer We started Prime UI because we believe site builders that do not output real code end up slowing you down. So instead of building another “app builder,” we focused on marketing sites, the work we know best after 10+ years of designing and building high-end websites at Pixel Point. Human expertise combined with AI scalability is what we believe in. Prime UI isn’t here (yet) to fully replace your stack, but it is already capable of saving you hundreds of hours in prototyping and the early phases of your next site project. What’s next: MCP: continuously add new pages to your site from Prime UI, aligned with your project setup and style. Skills: an AI-agent-friendly concentrate of our years of website design and development expertise. It is time to ditch old habits. Fear no code and build sites fast, ready for the AI era.

Introducing primeui. Build sites fast. Fear no code. Available today • 200+ handcrafted marketing UI components and templates • Sitemap planner • Prototype + experiment on an infinite canvas • Clean export to Next.js, Tailwind + shadcn/ui compatible • Not just landing pages: build Blog, Docs, Pricing, and more Coming soon • MCP • Skills • AI Designer We started Prime UI because we believe site builders that do not output real code end up slowing you down. So instead of building another “app builder,” we focused on marketing sites, the work we know best after 10+ years of designing and building high-end websites at Pixel Point. Human expertise combined with AI scalability is what we believe in. Prime UI isn’t here (yet) to fully replace your stack, but it is already capable of saving you hundreds of hours in prototyping and the early phases of your next site project. What’s next: MCP: continuously add new pages to your site from Prime UI, aligned with your project setup and style. Skills: an AI-agent-friendly concentrate of our years of website design and development expertise. It is time to ditch old habits. Fear no code and build sites fast, ready for the AI era.

Alex Barashkov

71,671 Aufrufe • vor 5 Monaten

🚀Introducing Flockx by Fetch.ai your No-Code Business & Personal Agents 👇 Starting today FlockX by enables businesses of all sizes to launch dedicated AI Agents—intelligent, autonomous representatives designed to drive measurable growth in revenue, customer retention, and operational efficiency. ✅Key Features: Zero-Code Agent Creation: Deploy your AI Agent in minutes using FlockX’s intuitive platform. No technical expertise required. Global Reach via Businesses gain instant access to a global audience, while users unlock seamless connections to enterprises worldwide—mutually empowering growth. Engage clients, resolve queries, and capture global opportunities as users interact seamlessly with your business through the platform. Proven Business Impact: Effortlessly automate critical workflows, from lead generation to loyalty management, with precision and scalability. Seamless community integration: Understand and engage your audience by connecting your AI Agent to Discord and Telegram Messenger, with tools like calendars, information dashboards, and embedded chat widgets streamlining communication. Built with the trusted uAgents framework: and hosted securely on these Agents integrate directly into your existing systems while adapting to evolving demands. 🔗Next Steps: Create your AI Agent: Claim pre-registered access: Over 1 million businesses have already been onboarded—verify if your Agent is ready for activation. The AI-driven economy demands agility. Equip your business with the tools to compete—and lead. Learn how to deploy your Agent in one minute or less.

🚀Introducing Flockx by Fetch.ai your No-Code Business & Personal Agents 👇 Starting today FlockX by enables businesses of all sizes to launch dedicated AI Agents—intelligent, autonomous representatives designed to drive measurable growth in revenue, customer retention, and operational efficiency. ✅Key Features: Zero-Code Agent Creation: Deploy your AI Agent in minutes using FlockX’s intuitive platform. No technical expertise required. Global Reach via Businesses gain instant access to a global audience, while users unlock seamless connections to enterprises worldwide—mutually empowering growth. Engage clients, resolve queries, and capture global opportunities as users interact seamlessly with your business through the platform. Proven Business Impact: Effortlessly automate critical workflows, from lead generation to loyalty management, with precision and scalability. Seamless community integration: Understand and engage your audience by connecting your AI Agent to Discord and Telegram Messenger, with tools like calendars, information dashboards, and embedded chat widgets streamlining communication. Built with the trusted uAgents framework: and hosted securely on these Agents integrate directly into your existing systems while adapting to evolving demands. 🔗Next Steps: Create your AI Agent: Claim pre-registered access: Over 1 million businesses have already been onboarded—verify if your Agent is ready for activation. The AI-driven economy demands agility. Equip your business with the tools to compete—and lead. Learn how to deploy your Agent in one minute or less.

Fetch.ai

38,274 Aufrufe • vor 1 Jahr

how to use claude code + 3 MCPs + 2 AI tools to go from cold idea to live A/B test in 1 session (full workflow): 1. connect ideabrowser as an MCP. pull your project context like ICP, positioning, offer, growth strategy directly into the terminal. 2. use ideabrowser skills to generate a lead magnet concept tailored to your niche. it builds the strategy doc and saves it as a file. 3. open paper (connected to claude code). design your landing page visually and iterate on hero, sections, components. design and code stay in sync. dont necessarily need figma here. 4. deploy the landing page. wire up humblytics for analytics like traffic, scroll depth, heat maps, funnel tracking, full attribution. 5. run a no-code A/B experiment directly from claude code. it dynamically swaps your headline on the live site. 6. store the results back into Idea Browser (pro plan) so your agent compounds context over time. every future decision is informed by past data. 7. everyone can build landing pages now. the gap is knowing what to test, how to get customers, and how to optimize. this stack/workflowcloses that gap. amirmxt showed me this live and i can't stop thinking about the arbitrage. 99.999% of people don't know this stack exists. it's like when 5 cent facebook ads were around, arbritrage is all over again. episode is finally live on The Startup Ideas Podcast (SIP) 🧃 (full demo there) this one is different. send it to a friend who likes ideas and automating businesses. 100% free to watch this and get your creative juices flowing (let me know what you want me to cover next) watch

how to use claude code + 3 MCPs + 2 AI tools to go from cold idea to live A/B test in 1 session (full workflow): 1. connect ideabrowser as an MCP. pull your project context like ICP, positioning, offer, growth strategy directly into the terminal. 2. use ideabrowser skills to generate a lead magnet concept tailored to your niche. it builds the strategy doc and saves it as a file. 3. open paper (connected to claude code). design your landing page visually and iterate on hero, sections, components. design and code stay in sync. dont necessarily need figma here. 4. deploy the landing page. wire up humblytics for analytics like traffic, scroll depth, heat maps, funnel tracking, full attribution. 5. run a no-code A/B experiment directly from claude code. it dynamically swaps your headline on the live site. 6. store the results back into Idea Browser (pro plan) so your agent compounds context over time. every future decision is informed by past data. 7. everyone can build landing pages now. the gap is knowing what to test, how to get customers, and how to optimize. this stack/workflowcloses that gap. amirmxt showed me this live and i can't stop thinking about the arbitrage. 99.999% of people don't know this stack exists. it's like when 5 cent facebook ads were around, arbritrage is all over again. episode is finally live on The Startup Ideas Podcast (SIP) 🧃 (full demo there) this one is different. send it to a friend who likes ideas and automating businesses. 100% free to watch this and get your creative juices flowing (let me know what you want me to cover next) watch

GREG ISENBERG

57,852 Aufrufe • vor 3 Monaten

A 26-YEAR-OLD AI ENGINEER WHOSE BIRMINGHAM THESIS OUTPERFORMED GOOGLE SCHOLAR BY 50% JUST SHIPPED GRAPHIFY: ONE COMMAND TURNS ANY FOLDER INTO A CLAUDE CODE SECOND BRAIN Safi Shamsi built Graphify 48 hours after Karpathy posted his LLM wiki idea. It turns any folder, codebase, docs, PDFs, into a knowledge graph Claude reads instead of grepping. Up to 43x fewer tokens per query. The trick almost nobody is using yet: one flag exports the entire graph as a fully-linked Obsidian vault. Repo: /safishamsi/graphify Setup, end to end: 1. Install: uv tool install graphifyy (or pipx install graphifyy). Verify with graphify --version. 2. Install the skill in Claude Code: graphify claude install. This wires Graphify into Claude Code so you can call it as a skill. 3. Open the folder you want mapped in Claude Code. In the terminal: graphify . It extracts every concept and builds the graph in graphify-out/. 4. Export to Obsidian: graphify . --obsidian. Writes one note per concept, every relationship as a wikilink, every node linked back to its source. 5. Open the new vault in Obsidian (Manage vaults → Open folder as a vault), or drag it as a subfolder into your existing one. That's it. Your Claude Code instance now has a navigable map of the codebase that loads instantly instead of re-reading files every session. Full step-by-step build of the Claude + Obsidian second brain in the article below. Bookmark this

A 26-YEAR-OLD AI ENGINEER WHOSE BIRMINGHAM THESIS OUTPERFORMED GOOGLE SCHOLAR BY 50% JUST SHIPPED GRAPHIFY: ONE COMMAND TURNS ANY FOLDER INTO A CLAUDE CODE SECOND BRAIN Safi Shamsi built Graphify 48 hours after Karpathy posted his LLM wiki idea. It turns any folder, codebase, docs, PDFs, into a knowledge graph Claude reads instead of grepping. Up to 43x fewer tokens per query. The trick almost nobody is using yet: one flag exports the entire graph as a fully-linked Obsidian vault. Repo: /safishamsi/graphify Setup, end to end: 1. Install: uv tool install graphifyy (or pipx install graphifyy). Verify with graphify --version. 2. Install the skill in Claude Code: graphify claude install. This wires Graphify into Claude Code so you can call it as a skill. 3. Open the folder you want mapped in Claude Code. In the terminal: graphify . It extracts every concept and builds the graph in graphify-out/. 4. Export to Obsidian: graphify . --obsidian. Writes one note per concept, every relationship as a wikilink, every node linked back to its source. 5. Open the new vault in Obsidian (Manage vaults → Open folder as a vault), or drag it as a subfolder into your existing one. That's it. Your Claude Code instance now has a navigable map of the codebase that loads instantly instead of re-reading files every session. Full step-by-step build of the Claude + Obsidian second brain in the article below. Bookmark this

Yarchi

140,729 Aufrufe • vor 26 Tagen

Introducing AI Assistance in Chrome DevTools! 🤯🚀 Ever wish you could have a coding buddy to help you with CSS and layout? Well, your wish is granted! The new AI Assistance in Chrome DevTools is here to make your life as a developer easier, powered by Gemini. The new panel aims to help you find and fix issues. Just ask it questions about your code, and it provides tailored explanations and even suggests solutions. This is our first exploration into agentic AI in DevTools and we're excited to hear what you think of it. Some key features: 1. Conversational prompts: Get tailored suggestions and code snippets. 2. Contextual understanding: AI understands the code you're working on. 3. Step-by-step guidance: Get help with everything from styling to debugging. Want to see it in action? Check out my screencast below to see how I used it to add a dark mode.

Introducing AI Assistance in Chrome DevTools! 🤯🚀 Ever wish you could have a coding buddy to help you with CSS and layout? Well, your wish is granted! The new AI Assistance in Chrome DevTools is here to make your life as a developer easier, powered by Gemini. The new panel aims to help you find and fix issues. Just ask it questions about your code, and it provides tailored explanations and even suggests solutions. This is our first exploration into agentic AI in DevTools and we're excited to hear what you think of it. Some key features: 1. Conversational prompts: Get tailored suggestions and code snippets. 2. Contextual understanding: AI understands the code you're working on. 3. Step-by-step guidance: Get help with everything from styling to debugging. Want to see it in action? Check out my screencast below to see how I used it to add a dark mode.

Addy Osmani

95,930 Aufrufe • vor 1 Jahr

Huge UI design boost by adding this to my AI workflow 1. Explore variations with Variant. The secret is to use "shuffle layout" and "see other views". This keeps the essence of a design that I like, but gives interesting layout variations. I also change colors and explore narrow by specifying one or two things in prompt, like font name, UI style or light/dark mode. 2. Copy HTML and prompt with Gemini 3 in site builder. Fix minute details like fonts, icons, assets, intro/scroll animations, adaptive layout and make the whole thing functional. Include image references, button styles, code snippets and other components to keep things creative. Often, I see sites that have one cool thing, but the rest is super generic. That's because AI is especially good at being generic without continuously feeding specs. 3. Turn into a landing page by prompt adding new components/sections and connect/adapt new pages. This is the part where most people stop, but it's actually the easiest since AI is so good at reading existing code. "Adapt this {page code} for a {features, blog, pricing, login} page." Finally, set up SEO and custom domain name. Boom, you just shipped a pro-level site that doesn't look generic.

Huge UI design boost by adding this to my AI workflow 1. Explore variations with Variant. The secret is to use "shuffle layout" and "see other views". This keeps the essence of a design that I like, but gives interesting layout variations. I also change colors and explore narrow by specifying one or two things in prompt, like font name, UI style or light/dark mode. 2. Copy HTML and prompt with Gemini 3 in site builder. Fix minute details like fonts, icons, assets, intro/scroll animations, adaptive layout and make the whole thing functional. Include image references, button styles, code snippets and other components to keep things creative. Often, I see sites that have one cool thing, but the rest is super generic. That's because AI is especially good at being generic without continuously feeding specs. 3. Turn into a landing page by prompt adding new components/sections and connect/adapt new pages. This is the part where most people stop, but it's actually the easiest since AI is so good at reading existing code. "Adapt this {page code} for a {features, blog, pricing, login} page." Finally, set up SEO and custom domain name. Boom, you just shipped a pro-level site that doesn't look generic.

Meng To

65,379 Aufrufe • vor 5 Monaten

$THIS MIGHT BE THE #1 OPEN-SOURCE REPO FOR CLAUDE CODE RIGHT NOW. IT GIVES CLAUDE A MEMORY AND SLASHES YOUR TOKEN COST ON EVERY QUESTION The repo is safishamsi/graphify, a free open-source skill that turns any codebase into a knowledge graph Claude Code can read instantly. Instead of grepping through your files every session, Claude gets a map of how everything connects The problem it fixes: Every time you ask Claude Code about a big repo, it does the same thing, greps through dozens of files like a brute-force Ctrl+F, blows through your context window, and sometimes still misses the answer hiding in a file nobody searched. Claude Code has no memory of how your project is structured. Every session starts from zero What it does: It maps your entire codebase into a knowledge graph, capturing not just which files exist, but which functions depend on which, which modules are central, and which files cluster around the same concern. Claude queries the map instead of scanning files How it works, three passes: 1. Code structure, free and local. Tree-sitter parses your files and pulls out classes, functions, imports and call graphs. No LLM, no tokens, just your actual code mapped deterministically 2. Audio and video, if you have them. Transcribed locally and folded into the graph 3. Docs, papers, images. Here an LLM does semantic analysis, figuring out what each document means and where it fits. Only the meaning gets sent up, never your raw source It saves you money: Normally a question about a big repo makes Claude spawn explore agents that scan file after file, eating your context window and your token budget before you get an answer. With the graph already built, Claude queries the map instead of re-reading the codebase every time. Same answer, a fraction of the tokens. The graph only gets built once, then a hook rebuilds it after each commit for free, so you never pay that scanning cost again. The bigger the repo, the bigger the gap The best parts: it's a skill, so once installed Claude knows when to use it without you memorizing commands. It works on non-code folders too, point it at docs or notes and it can spin up an Obsidian vault How to add it to your Claude: 1. Install Claude Code if you haven't: npm install -g Paul Jankura-ai/claude-code 2. Add the skill: claude skill add safishamsi/graphify 3. Open your project folder and run /graphify . to build the graph 4. Optional, make it automatic: graphify hook install so the graph rebuilds after every commit That's it. Ask Claude about your repo and it reads the map instead of burning tokens on a file hunt Bookmark this$

THIS MIGHT BE THE #1 OPEN-SOURCE REPO FOR CLAUDE CODE RIGHT NOW. IT GIVES CLAUDE A MEMORY AND SLASHES YOUR TOKEN COST ON EVERY QUESTION The repo is safishamsi/graphify, a free open-source skill that turns any codebase into a knowledge graph Claude Code can read instantly. Instead of grepping through your files every session, Claude gets a map of how everything connects The problem it fixes: Every time you ask Claude Code about a big repo, it does the same thing, greps through dozens of files like a brute-force Ctrl+F, blows through your context window, and sometimes still misses the answer hiding in a file nobody searched. Claude Code has no memory of how your project is structured. Every session starts from zero What it does: It maps your entire codebase into a knowledge graph, capturing not just which files exist, but which functions depend on which, which modules are central, and which files cluster around the same concern. Claude queries the map instead of scanning files How it works, three passes: 1. Code structure, free and local. Tree-sitter parses your files and pulls out classes, functions, imports and call graphs. No LLM, no tokens, just your actual code mapped deterministically 2. Audio and video, if you have them. Transcribed locally and folded into the graph 3. Docs, papers, images. Here an LLM does semantic analysis, figuring out what each document means and where it fits. Only the meaning gets sent up, never your raw source It saves you money: Normally a question about a big repo makes Claude spawn explore agents that scan file after file, eating your context window and your token budget before you get an answer. With the graph already built, Claude queries the map instead of re-reading the codebase every time. Same answer, a fraction of the tokens. The graph only gets built once, then a hook rebuilds it after each commit for free, so you never pay that scanning cost again. The bigger the repo, the bigger the gap The best parts: it's a skill, so once installed Claude knows when to use it without you memorizing commands. It works on non-code folders too, point it at docs or notes and it can spin up an Obsidian vault How to add it to your Claude: 1. Install Claude Code if you haven't: npm install -g Paul Jankura-ai/claude-code 2. Add the skill: claude skill add safishamsi/graphify 3. Open your project folder and run /graphify . to build the graph 4. Optional, make it automatic: graphify hook install so the graph rebuilds after every commit That's it. Ask Claude about your repo and it reads the map instead of burning tokens on a file hunt Bookmark this

Yarchi

55,345 Aufrufe • vor 1 Monat

🙌Meet Artifig: A Figma Plugin to Generate Figma Plugins Do you use Figma and ever feel like this: - Your mind is bursting with plugin ideas, but you can't bring them to life because you don't know how to code? - You want to focus on design, but repetitive tasks keep slowing you down? - You dream of creating custom tools for your team, but lack the time or resources? I’ve been there too. That’s why I created Artifig. ✨ What is Artifig? Artifig is an AI-powered Figma plugin that empowers anyone to build their own Figma plugins using just natural language. No coding needed—simply describe what you want, and watch as your idea transforms into a fully functional, real-time plugin. 🚀 Redefining Figma Plugin Development The core philosophy of Artifig is simple: Designers often have countless ideas and creative visions, but many of them remain unrealized due to a lack of technical skills. We believe designers shouldn’t be limited by their inability to code. You should focus on creating, not be held back by technical barriers or repetitive tasks. Artifig takes you directly from "description" to "implementation." 🛠️ How Does It Work? 1. Describe Your Needs: Tell Artifig what you want, like “Create a skew transformation tool for objects, supporting horizontal and vertical skew with real-time preview functionality.” 2. Generate and Run the Plugin: Artifig instantly generates the plugin and runs it right within Figma. For example, the generated plugin can apply skew transformations to objects, precisely controlled via matrix transformations, with an intuitive user experience. 3. Optimize and Iteration: Need adjustments? Simply describe them, and Artifig will Iterating the plugin step by step. 4. Share Your Creations: Publish your plugins to the Artifig community, or remix plugins shared by others to build on their ideas. No learning curve. No complex steps. It’s as simple as that. 🌟 Key Features - Zero Barrier to Entry: No coding experience needed—any Figma user can create plugins effortlessly. - Multilingual Support: Works in multiple languages, including English, Chinese, French, Japanese, and German. - What-You-See-Is-What-You-Get: Generated plugins run in real-time, so you can quickly validate and refine your ideas. - Open and Flexible: The generated plugin code is 100% yours—modify it, distribute it, even use it commercially. - Global Community: Share your plugins, explore others’ creations, and publish your plugins to the Figma community. 🎯 Why is Artifig a Game-Changer? 1. No More Repetitive Work Let AI handle the tedious, time-consuming tasks: batch renaming layers, auto-aligning elements, or applying styles in bulk. All you need to do is say, “Import a PDF and arrange each image on the canvas with 20px spacing.” 2. Quickly Bring Ideas to Life From color contrast checks to data imports and custom components, all your “what if we could” ideas can now become plugins. Just one natural language description, and Artifig makes it happen. 3. Custom Tools for Your Team Build tailored tools for your team, creating unique solutions to streamline your workflow. 4. Not Just a Tool, But a Learning Experience Artifig explains the logic behind the code it generates, helping you understand Figma APIs and JavaScript. Today, you’re a designer; tomorrow, you could also be a design engineer. 🧑‍🚀👩🏻‍💻🥷🏻 Who is Artifig For? - Beginners: No development experience needed—just describe your ideas and let Artifig do the rest. - Experts: Save time and focus on high-value tasks while Artifig handles the repetitive work. - Learners: Use Artifig as a bridge to deepen your understanding of development. - Teams: Build custom tools to enhance collaboration and efficiency. 🎉 Ready to Get Started? I believe designers’ time and focus should be spent on creating, not on wrestling with complex tools. Artifig is the first step toward realizing this vision. Try Artifig now and experience an unprecedented flow of creativity!

🙌Meet Artifig: A Figma Plugin to Generate Figma Plugins Do you use Figma and ever feel like this: - Your mind is bursting with plugin ideas, but you can't bring them to life because you don't know how to code? - You want to focus on design, but repetitive tasks keep slowing you down? - You dream of creating custom tools for your team, but lack the time or resources? I’ve been there too. That’s why I created Artifig. ✨ What is Artifig? Artifig is an AI-powered Figma plugin that empowers anyone to build their own Figma plugins using just natural language. No coding needed—simply describe what you want, and watch as your idea transforms into a fully functional, real-time plugin. 🚀 Redefining Figma Plugin Development The core philosophy of Artifig is simple: Designers often have countless ideas and creative visions, but many of them remain unrealized due to a lack of technical skills. We believe designers shouldn’t be limited by their inability to code. You should focus on creating, not be held back by technical barriers or repetitive tasks. Artifig takes you directly from "description" to "implementation." 🛠️ How Does It Work? 1. Describe Your Needs: Tell Artifig what you want, like “Create a skew transformation tool for objects, supporting horizontal and vertical skew with real-time preview functionality.” 2. Generate and Run the Plugin: Artifig instantly generates the plugin and runs it right within Figma. For example, the generated plugin can apply skew transformations to objects, precisely controlled via matrix transformations, with an intuitive user experience. 3. Optimize and Iteration: Need adjustments? Simply describe them, and Artifig will Iterating the plugin step by step. 4. Share Your Creations: Publish your plugins to the Artifig community, or remix plugins shared by others to build on their ideas. No learning curve. No complex steps. It’s as simple as that. 🌟 Key Features - Zero Barrier to Entry: No coding experience needed—any Figma user can create plugins effortlessly. - Multilingual Support: Works in multiple languages, including English, Chinese, French, Japanese, and German. - What-You-See-Is-What-You-Get: Generated plugins run in real-time, so you can quickly validate and refine your ideas. - Open and Flexible: The generated plugin code is 100% yours—modify it, distribute it, even use it commercially. - Global Community: Share your plugins, explore others’ creations, and publish your plugins to the Figma community. 🎯 Why is Artifig a Game-Changer? 1. No More Repetitive Work Let AI handle the tedious, time-consuming tasks: batch renaming layers, auto-aligning elements, or applying styles in bulk. All you need to do is say, “Import a PDF and arrange each image on the canvas with 20px spacing.” 2. Quickly Bring Ideas to Life From color contrast checks to data imports and custom components, all your “what if we could” ideas can now become plugins. Just one natural language description, and Artifig makes it happen. 3. Custom Tools for Your Team Build tailored tools for your team, creating unique solutions to streamline your workflow. 4. Not Just a Tool, But a Learning Experience Artifig explains the logic behind the code it generates, helping you understand Figma APIs and JavaScript. Today, you’re a designer; tomorrow, you could also be a design engineer. 🧑‍🚀👩🏻‍💻🥷🏻 Who is Artifig For? - Beginners: No development experience needed—just describe your ideas and let Artifig do the rest. - Experts: Save time and focus on high-value tasks while Artifig handles the repetitive work. - Learners: Use Artifig as a bridge to deepen your understanding of development. - Teams: Build custom tools to enhance collaboration and efficiency. 🎉 Ready to Get Started? I believe designers’ time and focus should be spent on creating, not on wrestling with complex tools. Artifig is the first step toward realizing this vision. Try Artifig now and experience an unprecedented flow of creativity!

yancymin

21,222 Aufrufe • vor 1 Jahr

Introducing Impeccable 3.5, the best way to design in production: iterate on real UI with your AI agent, in the codebase you actually ship. Turns out many popular design skills, including Impeccable and Anthropic's frontend-design, weren't actually very good at...design (the workflow was valuable, but the output didn't magically make LLMs like GPT great designers). We measured it across thousands of generations: 74% of pages used the cream AI-default background, 76% reached for extreme letter-spacing, 90%+ failed the contrast floor. So we started fixing slop systematically, specific to each model. The skill now compiles rules for the exact defects each model makes, instead of shipping one generic file to everyone. The biggest jump is in GPT-5.5 and Codex. Also new: ◆ It now knows the difference between a new project and an existing one. Existing codebase, it reads your design system and preserves your identity. Greenfield, it seeds a fresh palette from 129 hand-curated anchors so every cold start doesn't drift to the same safe colors. ◆ Live Mode is now in beta, and works at two scales. Type a direction into the new Steer bar, or speak it, and the agent reads the whole page and edits it in place. Or pick a single element, steer it with a sub-command, live-edit any copy, and accept the variant straight back to source. Insert mode scaffolds brand-new elements between the ones already there. Recovery survives HMR, hidden heroes, and dev-tool overlays. ◆ A rebuilt anti-pattern detector. Torn off jsdom and onto a real CSS cascade resolver: roughly 20x faster, dependency-free, and now small enough to run inline inside the skill, not just the CLI and extension. 14 new rules, 41 total. ◆ The skill keeps itself current, checking once a day and offering to update. Plus /impeccable init and a bare /impeccable that reads your repo and tells you the next move. Free, open source. Claude Code, Codex, Cursor, and more.

Paul Bakaus

101,825 Aufrufe • vor 1 Monat

🎉 Tailkit 4.0 is here, and I couldn't be more excited! 🙌🥳 But first - Giveaway Alert! Want to get a free Tailkit Developer license? Just drop a reply and give a like or repost (totally optional, but super appreciated). The lucky winner will be announced next Tuesday (October 8th) – good luck! Can you believe it’s already been 4 years since Tailkit’s journey started? ❤️ It feels like just yesterday I launched Tailkit 1.0 as an offline standalone web app back on October 1st, 2020. I'm really attached to this project because it was launched just a few days before I became a dad 👶😍 Fast forward to today, and Tailkit has grown into a fully customizable, feature-packed online app that gives you access to: - 550+ Tailwind CSS components (fully responsive + dark mode support) - 1,750+ Code snippets for HTML, React, Vue.js, and Alpine.js - 7 Marketing & Application Templates for HTML, React, Vue.js, and Laravel (fully responsive + dark mode support) - 10 Starter Kits for HTML, HTML with Vite, React, Vue.js, Laravel, Next.js, Nuxt, Astro, Svelte and Angular - 30 Days of Unlimited Design Service with every new Team license - Exclusive deals on third-party tools and projects - Handy helper tools like Button Builder, Color Palette, and Icon Finder - 3,700+ SVG Icons from Bootstrap and Heroicons - Free lifetime updates - Email support whenever you need it And the 4.0 update is packed with even more awesome features and upgrades: - 6 new UI components (Notifications) were added in Application UI package - 20 new UI components (Image/Content Sliders++) were added in Marketing package - React version (uses Vite) is introduced for all Templates - React code snippets were improved in all packages - Astro Starter Kit was added - Remove Dark Classes (from code snippets) option was added in App - Universal Dark Mode (preview pane can default to global dark mode) option was added in App - New preview colors (fuchsia, gray) were added in App - Heroicons v2 icons were updated to v2.1.5 adding 28+ brand new icons in App - 3 new exclusive deals are now available - UI design improvements in App - Various improvements and fixes in App - All dependencies were updated in Starter Kits - All dependencies were updated in Templates - Marketing website redesigned - Color Palette tool was made available to all I’ve put over 200 hours into this update alone, and I’m beyond excited to finally share it with you. Your continued support has made this journey possible, and I’m so grateful to have you along for the ride. 🙏 Wishing you an amazing day – remember, YOU ARE AWESOME! Go build something incredible! 🚀

John Champ

10,940 Aufrufe • vor 1 Jahr

Texas Sports Academy x Dynamic Prep coming in January! We're partnering with Jermaine O'Neal and the #1 team in the nation, Dynamic Prep, to create the best middle school in DFW for serious athletes. We've already created an amazing facility. We remodeled a traditional school to turn it into a D1 athlete-producing factory. Dynamic Prep plays there already: - We've hosted their Faze games in the OTE league - This gym is already becoming one of the most exciting places in Texas to watch elite athletes hoop The facility has a state-of-the-art weight room, gym, film room, and podcast room. But here's what really sets us apart, our 4 Commitments: 1. Double Your D1 Odds: Every student gets an athletic assessment and personalized skill development plan. We focus on fundamentals that other programs ignore... fixing weaknesses, not just playing to strengths. 2. Long-Term Athletic Development: We train well-rounded, holistic athletes through speed & agility training, balance, coordination, and LTAD principles. All our coaches have sent athletes to D1 programs. 3. Learn 2x in 2 Hours: Powered by Alpha School's proven model, we use personalized learning, mastery-based learning, and learning science principles so students crush academics and training by 4pm - with no homework and more family dinners. 4. Kids Love School: We make sports fun again. No burnout from excessive competitive games. Instead, we focus on skill development, life skills (nutrition, sports psychology, financial literacy, public speaking), and teaching kids to build their audience early. This is the future of elite athletics.

Texas Sports Academy x Dynamic Prep coming in January! We're partnering with Jermaine O'Neal and the #1 team in the nation, Dynamic Prep, to create the best middle school in DFW for serious athletes. We've already created an amazing facility. We remodeled a traditional school to turn it into a D1 athlete-producing factory. Dynamic Prep plays there already: - We've hosted their Faze games in the OTE league - This gym is already becoming one of the most exciting places in Texas to watch elite athletes hoop The facility has a state-of-the-art weight room, gym, film room, and podcast room. But here's what really sets us apart, our 4 Commitments: 1. Double Your D1 Odds: Every student gets an athletic assessment and personalized skill development plan. We focus on fundamentals that other programs ignore... fixing weaknesses, not just playing to strengths. 2. Long-Term Athletic Development: We train well-rounded, holistic athletes through speed & agility training, balance, coordination, and LTAD principles. All our coaches have sent athletes to D1 programs. 3. Learn 2x in 2 Hours: Powered by Alpha School's proven model, we use personalized learning, mastery-based learning, and learning science principles so students crush academics and training by 4pm - with no homework and more family dinners. 4. Kids Love School: We make sports fun again. No burnout from excessive competitive games. Instead, we focus on skill development, life skills (nutrition, sports psychology, financial literacy, public speaking), and teaching kids to build their audience early. This is the future of elite athletics.

Lamar

10,992 Aufrufe • vor 7 Monaten