Design Workflow Optimization

🪂 How To Make Your Design System AI-Ready (https://lnkd.in/dtnpy7CM), a practical guide on how to reduce drifts, minimize mistakes, maintain context and improve the quality of AI-generated prototypes — with structured spec files, automated auditing and token layers. Put together by Hardik Pandya from Atlassian. --- 🔹 1. Design Decisions Are Infrastructure AI-generated prototypes often don't deliver consistently decent results because of tiny inconsistencies scattered all across a design system. Often it's decisions made but not documented, hard-coded values never cleaned up, or relying too much on AI making sense of mock-ups or design flows on its own. Unsurprisingly, better AI prototypes come from better data — but also from better human guidance. We shouldn’t assume that AI knows how to choose the right component, and how to design with accessibility in mind. It needs priorities, a clear path on how we make decisions, design principles, examples, do's and don'ts. In fact, we should treat design decisions as infrastructure. That means that every time we make a decision — not just a design decision, but even decision on how actually prioritize our work and how we make decisions around here — it must find a path into the spec file that is then consumed by AI. --- 🔶 2. Three Layers: Spec Files + Token Layer + Audit To ensure quality, we establish design principles, guidelines, rules in a form of “spec files”). It's structured Markdown files that include spacing rules, color choices, component usage guidelines, priorities etc. AI is going to read and reuse that spec file every time it's going to generate a prototype. Because the spec files are text files, it's much more cost-effective, but also much more accurate just because we don't rely on AI recognizing or decoding patterns from mock-ups, but gets specific guidelines instead. In fact, extending code is often a more effective way than generating code from mock-ups. Token layer lists and keeps updated all tokens used throughout the design system. AI always chooses from a closed set of named variables instead of inventing plausible values ad-hoc. An audit script catches what AI gets wrong. It scans the prototype and flags every hard-coded value and flags it if necessary. It can be a regular software doing that, with AI waiting for its feedback to come back. Finally, when a design system ships updates, a sync routine flags which spec files need updating. The goal is to make sure that AI always reads up-to-date, current specs, not the ones written against an outdated version. --- 🔺 3. Examples of AI-Ready Design Systems ⌾ Atlassian: https://lnkd.in/dVsGc3Cp ⌾ Carbon: https://lnkd.in/d4zq4WWb ⌾ CMS Design System: https://lnkd.in/dHHzV3en ⌾ Nordhealth: https://lnkd.in/d8C4j2ZA Yet again, AI can’t magically resolve technical debt or design debt — it needs guidance, decisions, priorities and principles.

I left Microsoft to build foundations for graphic design systems. Today, design is still evaluated on vibes, not structure or correctness. So we approached this as a data problem first. We built a large-scale dataset of structured design compositions: each design represented as a hierarchy of elements (text, images, vectors) with explicit layout, typography, and constraints. Taste is personal and constantly evolving. So we built adaptive RL loops that learn from every edit, every rebrand, and every enterprise workflow. Most image models operate in pixel space, so edits require full regeneration. Our models operate in component space. The first model family we’re shipping focuses on editing: given any image → decompose it into independent layers (text, icons, backgrounds, shapes), all editable without breaking the rest. Instead of: prompt → image → prompt → image We enable: generate → decompose → edit → scale Try Lica with the link in the comments.

RAG isn’t just about connecting a model to a vector database. It’s a complete system — with 9 moving parts that must work together to deliver reliable, context-aware responses. Over the last few months, I’ve refined this architecture while working on production-grade GenAI pipelines. Each layer has its own purpose — from ingesting and preprocessing data to evaluating and improving retrieval and generation. Here’s how it breaks down: ➟ Ingest & Preprocess: Collect, clean, and normalize data from multiple sources. ➟ Split Into Chunks: Use semantic-aware chunking to preserve meaning. ➟ Generate Embeddings: Choose embedding models based on task and domain. ➟ Store in Vector DB: Maintain a scalable vector store and metadata index. ➟ Retrieve: Combine dense, semantic, and sparse retrieval for best recall. ➟ Orchestrate the Pipeline: Use tools like LangChain or Vertex AI to automate flows. ➟ Select LLMs for Generation: Route queries to the best-fit model or gateway. ➟ Add Observability: Track performance, latency, and prompt quality. ➟ Evaluate & Curate: Continuously test retrieval and fine-tune your system. What most people miss is that RAG is iterative — not a one-time setup. Observability, evaluation, and feedback loops are what turn it from a demo into a production-ready system. If you’re building GenAI workflows, this blueprint can serve as your foundation — then adapt, optimize, and evolve it based on your data and use cases.

Most designers are using Claude wrong Here's how the top 1% are actually using Claude in their design workflow 1. IN FIGMA — Design to Code (officially) Figma just launched a native integration with Claude Code. You build in Figma. Claude reads every layer, component, auto layout setting, and design token — and generates production-ready code. Not a rough translation. Pixel-perfect output. No more developer handoff nightmares. No more "this isn't what I designed." The gap between design and code? Officially closed. 2. IN FIGJAM — Turn conversations into diagrams Connect Claude to FigJam. Drop in a PRD, a PDF, or just type your brief. Claude builds: → User flow diagrams → System architecture maps → Gantt charts → Decision trees → Brainstorm canvases Your whole team can then edit them live. No copy-pasting. No redrawing from scratch. 3. CODE TO CANVAS — The reverse workflow Built a live prototype in Claude Code? With "Code to Canvas" — you can capture that working UI directly as an editable Figma frame. Annotate it. Compare options side by side. Align your team. Without anyone touching code. This is vibe designing. And it just became real. 4. CLAUDE.md — Build your personal design agent This one nobody is talking about. You can train Claude on YOUR design workflow. Your naming conventions. Your spacing rules. Your component patterns. Your export settings. Show Claude once. Tell it to write it to CLAUDE.md. Next project — it remembers. It works the way YOU work. Not the way a generic AI works. 5. BEYOND FIGMA — What else designers are using Claude for: → Writing UX copy and microcopy at scale → Generating user research interview scripts → Summarising user feedback into insight themes → Creating design system documentation → Reviewing accessibility before dev handoff → Drafting design critique frameworks The designers who'll win the next 5 years? Not the ones who resist AI. Not the ones who blindly delegate to it. The ones who build a workflow where Claude amplifies every hour they spend designing. Save this. Share it with your team. Which of these are you already using? Drop it below #ProductDesign #UX #Claude #AI #Figma #DesignTools #FigJam #AIDesign

Wow. I just built 3 mini-apps for PMs in under 10 minutes: an empathy mapper, a journey analyzer, and a competitive analysis tool with Opal (Google Labs). No PRD. No Figma. No tickets. Just an idea → an experience. Instead of debating documents, I’m now sharing working mini-apps with my team ask them "react to this, let’s refine it” I used Opal to prototype the vibe with an: -Empathy Mapper -User Journey Analyzer -Competitive Landscape Tool Each one took minutes. Each one was immediately shareable. Each one changed the conversation. Use Opal when: -You want to validate an idea before writing a PRD -You need a quick tool for a workshop or meeting -You want to make research or concepts visible -You want to better empathize about your user Think of Opal as your 10-minute lab. If it takes longer than that, move it to a full prototype — that’s where other AI prototyping tools come in. Tips for PMs adopting this workflow -Start tiny. Your first Opal app should take under ten minutes. That constraint keeps you focused on intent, not polish. -Think in verbs, not nouns. Prompts like “summarize feedback” or “visualize trends” produce far better prototypes than static descriptions. -Collaborate live. Invite designers, engineers, and stakeholders into the session. Watching the prototype evolve creates alignment faster than any meeting. -Reflect. After every prototype, note what worked. Each build sharpens your prompting instincts and your product intuition. 🔗 Guides + masterclass in the comments 👇

How can designers use Claude Code? Not as a chatbot. As a production engine! Tommaso Nervegna recently published a practical guide to move from static mockups to working software without becoming traditional developers. At first glance, it sounds like “AI helps you code.” It’s not that simple. This isn’t about asking AI to generate snippets and pasting them somewhere. It’s about using Claude Code as an execution layer, where design intent becomes runnable output. What’s happening in this workflow: 🔸 Designers describe outcomes, not syntax 🔸 Claude generates structured project scaffolding 🔸 Iteration happens conversationally, with persistent context 🔸 Components evolve into functional UI, not just visual artifacts 🔸 The feedback loop lives inside the AI workflow, not in Jira tickets That’s a different paradigm. This isn’t “design handoff improved.” It’s closer to: design-as-executable-logic. When AI understands the structure, constraints, and system intent, documentation becomes dynamic. It becomes operational. Still early? Definitely. Still messy? In parts. But directionally… this is big. Because if designers can reliably move from concept → structured logic → functional interface with AI as a collaborator, the bottleneck shifts. Less translation. More orchestration. More systems thinking. We’re getting closer to a world where: Design is infrastructure. Prompts are architecture. And iteration cycles collapse dramatically. 🔗 Check the Practical Guide: https://lnkd.in/d_C7Nad6 Would you use Claude Code as part of your design workflow, or does that blur a boundary you still want to keep? 👇 #DesignSystems #designsystem #ClaudeCode #GenerativeAI #AIDesign #DesignEngineering #DesignOps #ProductDesign #UXStrategy #VibeCoding

The secret to a 3X boost in conversions? It starts with UX. Over the past 15 years, I've refined various strategies to optimise UX. Many people often focus on fancy designs and animations. But no one cares how fancy your brand looks. It's all about making every interaction easier. That's where UX comes in. Enhancing user experience: - Improves SEO - Lowers bounce rates - Increases conversions - Leaves a lasting impression Don’t underestimate small changes like tweaking navigation menus. These can massively boost your sales and conversions. And most importantly, Even small annoyances can drive users away. Don’t ignore the little things. To a user, these are deal breakers: - Fix broken redirects - Streamline navigation - Optimise heavy pages - Decrease loading times - Clean up cluttered layouts - Remove duplicate content - Eliminate auto-play media - Minimise excessive pop-ups - Add missing alt text to images - Repair links leading to 404 pages - Make contact info easily accessible - Make CTAs clear and action-oriented - Ensure the site is fully responsive on mobile - Simplify complex contact forms into multistep Regular UX audits are crucial. Always keep user experience in focus. What else would you add to this list? ------ If you enjoyed this, follow me. I share strategies to optimise your website's performance. Want my help? DM me.

Creative teams need reusable AI skills as much as engineers do. Real creative workflows rarely start with: “Let’s generate a brand-new image.” More often, the work sounds like: “We already have an approved campaign visual. Can we adapt it into 12 channel formats?” “Can we make this batch of headshots look consistent?” “Can this product image become an e-commerce asset, a pitch deck visual, and an OOH mockup?” That’s the idea behind Air Skills. It lets teams save a repeatable AI workflow as a named Skill, then run it again on any asset. Not just one-off generation. More like repeatable creative workflows for the assets, formats, and channels teams already work with. For example: /remove-background to create clean cutouts /screen-mock to place UI designs into device mockups /headshot to standardize a batch of team photos /rotate to turn a product image into a 360° animation Teams can also create their own Skills based on how they actually work. That part matters because the useful knowledge in creative teams is often not just the final asset. It is the treatment, the style, the small visual decisions, and the repeatable process behind it. Air is turning that process into something the whole team can reuse. Teach Air how you work once. After that, your standards run themselves. 📍Try how it works here: https://lnkd.in/gJAExA2X #AirPartner #ad

People assume more rules slow you down. In design, the opposite is true. According to Maven’s lead designer, to truly adopt AI, you need to create a ton of structure and rules. Yuan W. was previously on the design team at AirBnB, now she’s leading design at Maven and thinks most designers are using AI wrong. They treat it like a magic wand — type in a prompt, hope something good comes out, then fix everything AI got wrong. That workflow is slower than doing it yourself. The designers who are actually winning with AI took a completely different approach: they rebuilt their workflow first. AI needs structure to be useful. When your design system defines every component, style, and pattern, AI can generate assets that fit your brand instead of guessing. At Maven, Yuan’s team is connecting this end-to-end:  → using Figma MCP + Cursor to auto-generate front-end Storybook components directly from Figma designs  → setting up internal tools (Lovable & ComfyUI) to batch-generate branded visuals that stay consistent with our design language The result is designers spend less time on execution and more time on strategy, storytelling, and stakeholder influence. AI amplifies their output without taking away creative control. The designers who figure this out early will define the next era of product development. If you want to learn from designers on the cutting edge, we’ve partnered with Dive Club on a free series. Here’s the line-up: • How AI is changing Design Workflows with Michael Riddering (Host of Dive Club podcast), Henry Modisett (VP of Design at Perplexity), Pranathi Peri (Design at Vercel) and Nick Pattison (Founder at Primary) • Design Patterns For AI Interfaces with Vitaly Friedman (Smashing Magazine co-founder) • From Designer to Design Architect with MagicPath with Pietro Schirano (Founder of MagicPath) • Vibe Designing with AI with Xinran Ma (Founder of Design with AI) • Supercharge creativity with AI workflows in FLORA with Weber W. (Founder of FLORA) • Doing More With Your Design System in Figma with TJ Pitre (Founder at Southleft) and Joey Banks (Founder at Baseline Design) • AI-Driven Onboarding Workflows That 2x Activation with Kate Syuma (Founder at Growthmates) Check it out on Maven (it’s free): https://lnkd.in/eCwuwRNR

I experimented with a workflow that combines Gravity Sketch, mixed reality, and Runway's Gen-3 video-to-video AI and got some impressive results, here is what I did: 🚀 Step 1: Using Gravity Sketch in VR, I designed stasis tubes with humanoid figures inside. I placed these models throughout my hallway, integrating them into the real space, using mixed reality mode on my Meta Quest 3 headset. 🎥 Step 2: I filmed myself walking through this mixed reality set, holding a 3D object, capturing my real environment with the 3D models layered in. This gave a first-person view of the scene, as if I were navigating through an alien ship. 🧪 Step 3: Finally, I ran the footage through Runway’s Gen-3 video-to-video AI, using prompts to transform the scene into a space marine navigating an alien ship, complete with eerie stasis tubes and ambient sound effects to drive the atmosphere home. A fast, intuitive way to pre-visualize complex scenes that would otherwise take much longer to design and film traditionally. What this means for creative workflows: 🔹Advanced Storyboarding: With mixed reality, you can set up rough models and get a realistic sense of scale and positioning. You can actually walk through you scene, interacting with it and capturing raw footage directly. 🔹 Quick Pre-Visualization: Using video-to-video genAI, this rough footage can quickly be transformed into something more. It’s a great way to experiment with looks, check in with your client vision, and even lighting before diving into final production. 🔹 Future-Ready Workflows: As video-to-video AI improves, this workflow won’t just be for pre-viz. We’re looking at a future where you could create final-quality outputs straight from this setup, acting out scenes in a mixed reality environment while the AI enhances and polishes everything in real time. Moving towards final generated outputs vs rendered. This opens up a lot of possibilities. You could set up a mixed reality scene, interact with it, and create an entire short film without needing a massive crew or extensive post-production. For now, it’s a powerful way to prototype, storyboard, and explore creative concepts quickly and intuitively. ❓Curious about how mixed reality and AI could transform your creative process? Let’s connect-I’d love to share more insights and explore how these tools can push your projects to the next level.