Figma AI

Figma AI AI

Figma AI AI

Figma AI AI

Figma AI AI

Figma AI AI

Figma AI AI

Figma AI AI

Figma AI AI

Figma AI AI

Figma AI AI

vibecop is now an mcp server. we also scanned 5 popular mcp servers and the results are rough

Quick update on vibecop (AI code quality linter I've posted about before). v0.4.0 just shipped with three things worth sharing. vibecop is now an MCP server vibecop serve exposes 3 tools over MCP: vibecop_scan (scan a directory), vibecop_check (check one file), vibecop_explain (explain what a detector catches and why). One config block: json { "mcpServers": { "vibecop": { "command": "npx", "args": ["vibecop", "serve"] } } } This extends vibecop from 7 agent tools (via vibecop init) to 10+ by adding Continue.dev, Amazon Q, Zed, and anything else that speaks MCP. Scored 100/100 on mcp-quality-gate compliance testing. We scanned 5 popular MCP servers MCP launched late 2024. Nearly every MCP server on GitHub was built with AI assistance. We pointed vibecop at 5 of the most popular ones: Repository Stars Key findings DesktopCommanderMCP 5.8K 18 unsafe shell exec calls (command injection), 137 god-functions mcp-atlassian 4.8K 84 tests with zero assertions, 77 tests with hidden conditional assertions Figma-Context-MCP 14.2K 16 god-functions, 4 missing error path tests exa-mcp-server 4.2K handleRequest at 77 lines/complexity 25, registerWebSearchAdvancedTool at 198 lines/complexity 34 notion-mcp-server 4.2K startServer at 260 lines, cyclomatic complexity 49. 9 files with excessive any The DesktopCommanderMCP one is concerning. 18 instances of execSync() or exec() with dynamic string arguments. This is a tool that runs shell commands on your machine. That's command injection surface area. The Atlassian server has 84 test functions with zero assertions. They all pass. They prove nothing. Another 77 hide assertions behind if statements so depending on runtime conditions, some assertions never execute. The signal quality fix This was the real engineering story. Our first scan of DesktopCommanderMCP returned 500+ findings. Sounds impressive until you check: 457 were "console.log left in production code." But it's a server. Servers log. That's 91% noise. Same pattern across all 5 repos. The console.log detector was designed for frontend/app code. For servers and CLIs, it's the wrong signal. So we made detectors context-aware. vibecop now reads your package.json. If the project has a bin field (CLI tool or server), the console.log detector skips the entire project. We also fixed self-import detection and placeholder detection in fixture/example directories. Before: ~72% noise. After: 90%+ signal. The finding density gap holds: established repos average 4.4 findings per 1,000 lines of code. Vibe-coded repos average 14.0. 3.2x higher. Other updates: 35 detectors now (up from 22) 540 tests, all passing Full docs site: https://bhvbhushan.github.io/vibecop/ 48 files changed, 10,720 lines added in this release npm install -g vibecop vibecop scan . vibecop serve # MCP server mode GitHub: https://github.com/bhvbhushan/vibecop If you're using MCP servers, have you looked at the code quality of the ones you've installed? Or do you just trust them because they have stars? submitted by /u/Awkward_Ad_9605 [link] [comments]

vibecop is now an mcp server. we also scanned 5 popular mcp servers and the results are rough

Quick update on vibecop (AI code quality linter I've posted about before). v0.4.0 just shipped with three things worth sharing. vibecop is now an MCP server vibecop serve exposes 3 tools over MCP: vibecop_scan (scan a directory), vibecop_check (check one file), vibecop_explain (explain what a detector catches and why). One config block: json { "mcpServers": { "vibecop": { "command": "npx", "args": ["vibecop", "serve"] } } } This extends vibecop from 7 agent tools (via vibecop init) to 10+ by adding Continue.dev, Amazon Q, Zed, and anything else that speaks MCP. Scored 100/100 on mcp-quality-gate compliance testing. We scanned 5 popular MCP servers MCP launched late 2024. Nearly every MCP server on GitHub was built with AI assistance. We pointed vibecop at 5 of the most popular ones: Repository Stars Key findings DesktopCommanderMCP 5.8K 18 unsafe shell exec calls (command injection), 137 god-functions mcp-atlassian 4.8K 84 tests with zero assertions, 77 tests with hidden conditional assertions Figma-Context-MCP 14.2K 16 god-functions, 4 missing error path tests exa-mcp-server 4.2K handleRequest at 77 lines/complexity 25, registerWebSearchAdvancedTool at 198 lines/complexity 34 notion-mcp-server 4.2K startServer at 260 lines, cyclomatic complexity 49. 9 files with excessive any The DesktopCommanderMCP one is concerning. 18 instances of execSync() or exec() with dynamic string arguments. This is a tool that runs shell commands on your machine. That's command injection surface area. The Atlassian server has 84 test functions with zero assertions. They all pass. They prove nothing. Another 77 hide assertions behind if statements so depending on runtime conditions, some assertions never execute. The signal quality fix This was the real engineering story. Our first scan of DesktopCommanderMCP returned 500+ findings. Sounds impressive until you check: 457 were "console.log left in production code." But it's a server. Servers log. That's 91% noise. Same pattern across all 5 repos. The console.log detector was designed for frontend/app code. For servers and CLIs, it's the wrong signal. So we made detectors context-aware. vibecop now reads your package.json. If the project has a bin field (CLI tool or server), the console.log detector skips the entire project. We also fixed self-import detection and placeholder detection in fixture/example directories. Before: ~72% noise. After: 90%+ signal. The finding density gap holds: established repos average 4.4 findings per 1,000 lines of code. Vibe-coded repos average 14.0. 3.2x higher. Other updates: 35 detectors now (up from 22) 540 tests, all passing Full docs site: https://bhvbhushan.github.io/vibecop/ 48 files changed, 10,720 lines added in this release ​ npm install -g vibecop vibecop scan . vibecop serve # MCP server mode GitHub: https://github.com/bhvbhushan/vibecop If you're using MCP servers, have you looked at the code quality of the ones you've installed? Or do you just trust them because they have stars? submitted by /u/Awkward_Ad_9605 [link] [comments]

I published a book on Amazon in 18 hours using a team of 5 AI agents

Book publishing agents A couple of years ago I wrote 14 articles about the greatest tech stories of the 20th century for a Chinese tech publication. I read 14 books cover to cover for the research. Then the project just sat there. This year I decided to turn it into an English book on Amazon. Problem: I'd need translation (English is my second language), proofreading, fact-checking, copyright review, and KDP formatting. That's weeks of work and real money I didn't want to spend on an experiment. So I took a product design approach. I wrote a PRD (Product Requirements Document) first, then used Claude to set up 5 specialised AI agents: Translator - Plain English translation from Chinese, chapter by chapter Editor - Grammar, language quality, and faithfulness to original content Auditor - Fact-checking every quote and historical claim (like verifying Steve Jobs quotes) IP Guardian - Checking if every image and quote is legally usable (Wikipedia photos = OK, some others had to be removed) KDP Finisher - Formatting everything to Amazon's specific padding/spacing requirements For the cover, I generated concepts with AI image tools and polished the final version in Figma. The whole thing took about 18 hours of actual work spread over 2 days. The honest result: I've sold exactly X copies(details in the walkthrough video). Zero marketing beyond a single tweet. Turns out creating a product is the easy part. Getting it in front of readers is a completely different game. What I'd do differently: Start marketing before the book is done Build an audience for the topic first The AI pipeline worked great for production, but it can't sell for you The full walkthrough is on my YouTube channel (@BearLiu) if you want to see the actual process. submitted by /u/Serious_Bottle_1471 [link] [comments]

I attempted to build a git for AI reasoning behind code changes

I’ve been experimenting with a small tool I built while using AI for coding, and figured I’d share it. I kept running into the same issue over and over, long before AI ever entered the picture. I’d come back to a repo after a break, or look at something someone else worked on, and everything was technically there… but I didn’t have a clean way to understand how it got to that state. The code was there. The diffs were there. But the reasons or reasoning behind the changes was mostly gone. Sometimes that context lived in chat history. Sometimes in prompts. Sometimes in commit messages. Scattered across Jira tickets sometimes. Sometimes nowhere at all. I know I've personally written some very lazy commit messages. So you end up reconstructing intent and timeline from fragments, which gets messy fast. At a large org I felt like a noir private investigator trying to track things down and asking others for info. I’ve seen the exact same thing outside of code too in design. Old figma files, mocks, handoffs. You can see pages of mocks but no record of what changed or why. I kept thinking I wanted something like Git, but for the reasoning behind AI-generated changes. I couldn’t find anything that really worked, so I ended up taking a stab at it myself. That was the original motivation, at least. Soooooooo I rolled up my sleeves and built a small CLI tool called Heartbeat Enforcer. The idea is pretty simple: after an AI coding run, it appends one structured JSONL event to the repo describing: what changed what was done why it was done Then it validates that record deterministically. The coding Agent adds to the log automatically without manual context juggling. I also added a simple GitHub Action so this can run in CI and block merges if the explanation is missing or incomplete. One thing I added that’s been more useful than I expected is a distinction between: - planned: directly requested - autonomous: extra changes the AI made to support the task A lot of the weird failure modes I’ve seen aren’t obviously wrong outputs. It’s more like the tool quietly goes beyond scope, and you only notice later when reviewing the diff. This makes that more visible. This doesn’t try to capture the model’s full internal reasoning, and it doesn’t try to judge whether the code is correct. It just forces each change to leave behind a structured, self-contained explanation in the repo instead of letting that context disappear into chat history. For me, the main value has been provenance and handoff clarity. It also seems like the kind of thing that could reduce some verification debt upstream by making the original rationale harder to lose. And yes, it is free. I frankly would be honored if 1 person tries it out and tells me what they think. https://github.com/joelliptondesign/heartbeat-enforcer Also curious if anyone else has run into the same “what exactly happened here?” problem with Codex, Claude Code, Cursor, etc? And how did you solve it? submitted by /u/AI_Cosmonaut [link] [comments]

I had Claude read every harness engineering guide and build me one

I've been following the harness engineering space closely and kept running into the same problem: every open-source harness I found was over-engineered for what I actually needed. So I decided to build my own using Claude. Step 1: Consolidate the best practices I pointed Claude at four articles and asked it to synthesize the key insights into a single best-practices.md: Harness Design for Long-Running Apps (https://www.anthropic.com/engineering/harness-design-long-running-apps) by Anthropic Effective Harnesses for Long-Running Agents (https://www.anthropic.com/engineering/effective-harnesses-for-long-running-agents) by Anthropic Harness Engineering: Leveraging Codex in an Agent-First World (https://openai.com/index/harness-engineering/) by OpenAI Ralph Wiggum as a Software Engineer (https://ghuntley.com/ralph/) by Geoffrey Huntley The synthesis surfaced ideas that kept appearing across all four sources: Separate generation from evaluation. Agents are reliably bad at grading their own work. A standalone skeptical evaluator is far easier to tune than making a generator self-critical. Context windows are the constraint; structured files are the solution. Task lists (JSON, not Markdown), progress notes, and git history bridge the gap between sessions. If it's not in the repo, it doesn't exist for the agent. One task per session. This single rule prevents more failures than almost anything else. Verify before building. Always run a baseline check at session start. Compounding bugs across sessions is one of the most common failure modes. Strip harness complexity with each model upgrade. Every component encodes an assumption about what the model can't do. These go stale fast. Step 2: Build the harness I then asked Claude to build a minimal harness following the best-practices file, using the AskUserQuestion tool to interrogate me about my preferences before writing a line of code. It asked about my target stack, how much human oversight I wanted, cost vs. quality tradeoffs, and what "done" should look like for a session. The result was a harness I actually understood end-to-end, not a framework I was afraid to touch. What I built with it An AI agent that turns a Jira ticket and a Figma link into a working feature branch A structured data extraction pipeline that parses business documents with ~95% accuracy A few side projects where I wanted autonomous multi-session runs without babysitting What I learned Building a harness taught me more about what makes agents fail than reading about it did. The three things that mattered most in practice: The evaluator is not optional if you care about quality A JSON task list with strict append-only rules is genuinely better than a Markdown checklist The harness that works for Opus 4.6 today will be over-engineered in six months. Build for stripping down, not adding up If you're doing serious work with Claude Code, I'd recommend going through this exercise at least once. Even if you end up using an existing framework, you'll understand what it's actually doing for you. Happy to share the best-practices.md or the harness structure if there's interest. Edit: Here's the resources as requested: Minimal Harness: https://github.com/celesteanders/harness Best Practices: https://github.com/celesteanders/harness/blob/main/docs/best-practices.md submitted by /u/celesteanders [link] [comments]

Claude AI Cheat Sheet

Most people use Claude like a chatbot. But Claude is actually a full AI workspace if you know how to use it. I broke the entire system down in this Claude AI Cheat Sheet: Claude Models Use the right model for the job. • Opus 4.5 → Hard reasoning, research, complex tasks • Sonnet 4.5 → Daily writing, analysis, editing (best default) • Haiku 4.5 → Fast, cheap tasks and quick prompts All models support 200K context, which means you can feed large documents and projects. Prompting Techniques The quality of your output depends on the structure of your prompt. Some of the most effective techniques: • Role playing • Chained instructions • Step-by-step prompting • Adding examples • Tree of thought reasoning • Style-based instructions The best combo usually is: Role + Examples + Step by Step. Role → Task → Format Framework One of the simplest ways to improve prompts. Example structure: Act as [Role] Perform [Task] Output in [Format] Example: Act as a marketing expert Create a content strategy Output in a table or bullet points Prompt Learning Methods Different prompt styles produce different outputs. • Open ended → broad exploration • Multiple choice → force clear decisions • Fill in the blank → structured responses • Comparative prompts → X vs Y analysis • Scenario prompts → role based thinking • Feedback prompts → review and improve content Prompt Templates You can dramatically improve results using structured prompting. Three core styles: • Zero shot → no examples • One shot → one example provided • Few shot → multiple examples More examples usually means better outputs. Projects Projects turn Claude into a knowledge workspace. You can: • Upload files as knowledge • Organize chats by topic • Add custom instructions • Share with teams • Maintain long context across work Artifacts Artifacts allow Claude to generate interactive outputs like: • Code • Documents • Visualizations • HTML or Markdown apps You can read, edit, and run them directly inside the chat. MCP + Connectors MCP (Model Context Protocol) connects Claude to external tools. Examples: • Google Drive • Gmail • Slack • GitHub • Figma • Asana • Databases This allows Claude to work with real data and workflows. Claude Code Claude can also act as a coding agent inside the terminal. It can: • Read entire codebases • Write and test code • Run commands • Integrate with Git • Deploy projects Reusable Skills + Hooks Claude supports reusable markdown instructions called Skills. Plus automation hooks like: • PreToolUse • PostToolUse • Stop • SubagentStop These help control workflows and outputs. Prompt Starters Some prompts work almost everywhere: • “Act as [role] and perform [task].” • “Explain this like I am 10” • “Compare X vs Y in a table.” • “Find problems in this document.” • “Create a step-by-step plan for [goal].” • “Summarize in 3 bullet points.” Study the cheat sheet once. Your prompting will immediately level up. submitted by /u/Longjumping_Fruit916 [link] [comments]

I built an MCP Server that lets Cursor/Claude Code design your database visually in real-time. [ erflow.io ]

Hey everyone 👋 I'm a solo dev from Brazil and I've been building ER Flow — a free online ER diagram tool for database design. A few months ago I added something that completely changed how I work: an MCP Server that connects ER Flow to AI coding assistants. Here's how it works: You're in Claude Code (Cursor or, Windsurf, etc.) and you type something like: "Add a posts table with title, content, and author_id linking to users" ER Flow automatically: - Creates the table with correct column types - Adds the foreign key relationship - Generates the migration file - Updates the visual diagram — in real-time So instead of going back and forth between your IDE and a diagramming tool, your AI assistant handles the schema while you see everything update visually. It's like having a live database blueprint that stays in sync with your code. Other features: - Real-time collaboration (CRDT-based, Figma-style cursors) - Migration generation for Laravel & Phinx - Checkpoint/versioning system for schema changes - Triggers & stored procedures editor - Supports PostgreSQL, MySQL, Oracle, SQL Server, SQLite - SQL import (paste CREATE TABLE statements) Free tier gives you 1 project with 3 diagrams and 20 tables each — no credit card needed. I'd love feedback from people who use AI coding assistants daily. The MCP integration is still evolving and I'm looking for ideas on what to improve. 🔗 https://erflow.io submitted by /u/matheusagnes [link] [comments]

How Skills, Agents, Spec-kit, MCPs and Plugins actually work together in Claude Code — with a full open-source workflow

Claude Code may be confusing sometimes. Specially when it comes to Skills, Agents, MCPs, Plugins, Spec-kit — everyone explains one piece, nobody connects the dots. So I did. ∙ Skills — reusable instructions Claude loads automatically when relevant ∙ Agents — isolated workers with their own context, you delegate tasks to them ∙ Spec-kit — forces you to plan before touching any code (spec → plan → tasks → implement) ∙ MCPs — give Claude hands to interact with real tools (GitHub, Figma, Salesforce, Playwright) ∙ Plugins — bundle skills + agents + MCPs into one install The key insight: agents are the workers, skills are the knowledge they carry. No overlap, no conflict, each layer has its own lane. Full article explaining each concept in plain language, plus all agent files, skill-creator prompts, and setup instructions — open-sourced and ready to drop into your project today. 📖 Article: https://engahmedshehatah.medium.com/basic-setup-ai-dev-workflow-33724218fc2a 🗂️ GitHub: https://github.com/EngAhmedShehatah/ai-dev-workflow submitted by /u/dev-ahmd [link] [comments]

I built a React framework with 48 Claude Code agents and a Figma-to-React pipeline, and just open-sourced it

I've been working on a framework called Aurelius that uses Claude Code agents organized in a hierarchy to build React apps from Figma designs autonomously. The core idea: a single AI agent generating code is fine for small tasks, but for full app builds you need agents that can enforce iteration on each other. Aurelius has overseer agents that gate the pipeline — tests have to be written before components (TDD is mandatory, not optional), visual QA uses pixel-diff comparison with a 2% threshold, and the quality gate checks coverage, TypeScript, Lighthouse scores, and design token compliance before anything passes. The pipeline has 10 phases: Figma discovery → design token extraction → TDD gate → component build → pixel-diff visual QA (up to 5 iteration loops) → Playwright E2E tests → cross-browser screenshots → quality gate → responsive checks → build report. There are 48 agents total across engineering, design, testing, product, marketing, and ops. They're auto-selected by Claude Code based on what you're doing. The agents and skills are all defined in .claude/ so you can read, modify, or steal them for your own projects. It also has app-type awareness. It detects whether you're building a standard web app, a Chrome extension (reads manifest.json), or a PWA, and adjusts the E2E strategy accordingly. I just used it to port an app from Webflow to a Chrome extension and didn't have to reconfigure the pipeline at all. Some technical details people might care about: it uses Vitest + React Testing Library for unit/component tests, Playwright for E2E and cross-browser, pixelmatch for visual diffing, and design tokens are locked in a lockfile so hardcoded values can't leak into components. Everything is configurable in .claude/pipeline.config.json. MIT licensed, 118 commits, and the whole thing was built in about two weeks with Claude Code; which is kind of the point. The framework is itself a product of the workflow it automates. Milestones planned through v2.0.0. GitHub: https://github.com/PMDevSolutions/Aurelius Happy to answer questions about the agent architecture, the pipeline design, or how the overseer/worker agent pattern works in practice. submitted by /u/PMDevSolutions [link] [comments]

How do i redesign an existing apps based on a figma design

Like the task doesn't get anymore AI-able then this. I have a figma design that I need to apply onto a web app that's using Codeigniter 3. Like how do i structure the prompt? Should I download all the pngs from figma, put it in the folder, assign each png to each respective menu, and then just send it to Claude. I'm using Claude btw but the results sometimes just far from the design so how do I just apply the design perfectly onto the pages. AI should have done this easily please help. Thank you submitted by /u/Known-Exercise7234 [link] [comments]

Solo founder, zero design skills, needed a demo reel. Built one in a weekend for $0(with claude code)

I delayed my product launch for months because I couldn’t afford demo videos. Shoutout to u/ashadis and his post for giving me the push to actually try this. I built SiteCheck using Claude Code. It audits a website’s UX in ~30 seconds and generates a report with suggested fixes ranked by impact. The product was done. A few users had tried it and liked it. But I had nothing to show visually. No demo video, no motion, nothing that would make the product easy to understand at a glance. I reached out to freelancers. $500 for something basic. Most asked for Figma files and brand guidelines I didn’t have. I’m a developer, not a designer, so that whole process felt pretty foreign. So I just didn’t launch. For months. What changed was honestly just stubbornness. I came across that post, found Remotion (videos as React components), and used Claude Code to help me structure and iterate on the scenes like I would with any UI. https://reddit.com/link/1rz8nyp/video/f4cpcg70p9qg1/player Claude helped me: break the video into reusable components tweak animations and timing quickly iterate on layouts without needing design tools The first version was rough, but since everything was code, I kept improving it. Small tweaks like font sizes, spacing, and animation timing were just quick edits instead of full re-exports. I added a voiceover with ElevenLabs, some background audio, and rendered everything directly from the terminal. Is it perfect? No. But it got me unstuck. The project is free to try and I’m planning to launch it publicly soon. If anyone’s curious, I can share the demo video or how I structured it with Remotion + Claude. submitted by /u/RecognitionUpstairs [link] [comments]

We built a visual feedback loop for Claude's code generation, here's why

Love using Claude for frontend code, but there's one gap that keeps coming up: visual accuracy. You give it a Figma design, it generates solid code, but the rendered output never quite matches the original. Spacing, typography, colors, always slightly off. The problem is Claude (and every LLM) can't actually see what the code looks like when rendered. It's generating code based on text descriptions, not visual comparison. So we built Visdiff, it takes the rendered output, screenshots it, compares it pixel-by-pixel to the Figma design, and feeds the differences back into the loop until it matches. Basically giving AI eyes. We launched on Product Hunt today: https://www.producthunt.com/products/visdiff Has anyone else tried to solve this differently? Curious what workflows people have built around Claude for frontend accuracy. submitted by /u/kabmooo [link] [comments]

I used Claude to solve one of my biggest pain points for my Sports League

About 6 months ago, I got fed up trying to build schedules for my adult sports league. I’d spend hours using manual matrices just to mess up one thing and break the entire schedule. So, I decided to learn how to build an app to solve my own problem and made BrackIt. I'm writing this because when I started, I had no idea what I was doing. Reading other people's vibe-coding journeys on Reddit really helped me. The short story: if you're on the fence about building an app, just do it. **How I started** I messed around with AI builders like Lovable but settled on FlutterFlow because I wanted full customization. I actually wanted to learn the "hows and whys" of app logic. I started in Figma, then used Claude to guide me through building it in FlutterFlow with a Firebase backend. Claude walked me through building everything from scratch like containers, app states, custom components. It took way longer than using templates, but I don't regret it because I actually learned how data flows. Security of AI code is still a huge fear of mine, so I’ve done my best to add safeguards along the way. **My biggest struggle** Testing the scheduling algorithm. As I added more parameters, I had to constantly remake tournaments just to test the results. Sometimes I'd build for an hour, realize something broke, and have to roll back to an earlier snapshot because I didn't know what happened. Rescheduling logic was also a nightmare. If a week gets rained out, shifting the match lists, component times, and match orders took a lot of "I tried this and nothing is updating" prompts with Claude until I finally got it right. **Marketing** I didn't "build in public." Honestly, I was scared of failing and didn't want the pressure of hyping something up while balancing my day job and running a league. Knowing what I know now, I probably would next time, but for this app, I just wanted to solve my own pain point. **Where I'm at now** I’m finally at a place where I'm proud of the app. I'm currently beta testing it with other organizers and fixing minor bugs. I haven't submitted to the App Stores yet, but I'm hoping to be confident enough to launch in late March or early April. **The Stack:** Website: Framer ($120/yr) Dev: FlutterFlow ($39/mo) Backend: Firebase (Free) In-App Purchases: RevenueCat AI: Claude ($20/mo) submitted by /u/ClassyChris23 [link] [comments]