Best new design, AI and developer resources: day 25

Best Productivity Resources is twenty-five days old today. This round of additions is all about practical design workflows, setting up AI agents, frontend building and open-source tools. Every listing was reviewed by hand and links straight to its original website, plugin page or repository.

1. Devault: Web to Figma

Devault is a Figma plugin that turns a live website URL or an HTML email into editable Figma layers, not a flat screenshot. It keeps native text, images, vectors, borders and shadows intact, handles desktop, tablet and mobile captures, and can unroll complex scroll animations into frames. Link: https://www.figma.com/community/plugin/1662499168812590516/devault-web-to-figma-import-websites-urls-email-html

2. Agentfiles, agent instructions inside Obsidian

Agentfiles turns Obsidian into a shared workspace for your AI coding-agent instructions. Browse, create and edit agent files for Claude Code, Cursor, Codex, Windsurf, GitHub Copilot and other tools, all from one familiar notes app. Link: https://github.com/Railly/agentfiles

3. Shadcnblocks Vue, copy-paste Vue blocks

Shadcnblocks Vue is a big library of more than 1,400 copy-paste Vue blocks and components built with shadcn/ui and Tailwind. It covers marketing pages, dashboards, ecommerce, portfolios, pricing, testimonials and plenty of other common interface patterns. Link: https://www.shadcnblocksvue.com/

4. Frontend Design Skill, for less generic interfaces

Anthropic's official Frontend Design skill helps Claude make deliberate calls on layout, typography, palette and visual direction, instead of falling back on generic interface patterns. If you use Claude for frontend work, whether you're a developer or a designer, it's a useful one to add. Link: https://github.com/anthropics/skills/tree/main/skills/frontend-design

5. Theme Factory and Brand Guidelines, for consistent visuals

Theme Factory gives you ten ready-made color and font themes for slides, documents, reports and pages. Brand Guidelines applies Anthropic's official visual identity to artifacts. Side by side, they show how reusable skills can make visual output more consistent. Links: https://github.com/anthropics/skills/tree/main/skills/theme-factory and https://github.com/anthropics/skills/tree/main/skills/brand-guidelines

6. Canvas Design and Algorithmic Art, for original artwork

Canvas Design creates original static artwork and posters as PNG or PDF files. Algorithmic Art is about reproducible generative work using p5.js, seeded randomness and interactive controls. Both start from a defined creative philosophy rather than just copying an existing style. Links: https://github.com/anthropics/skills/tree/main/skills/canvas-design and https://github.com/anthropics/skills/tree/main/skills/algorithmic-art

7. Skill Creator, for building better skills

Skill Creator gives Claude a structured process for creating, editing, testing and improving other skills. It includes evaluation and benchmarking workflows, which makes it especially relevant for teams that want agent instructions to be measurable, not improvised. Link: https://github.com/anthropics/skills/tree/main/skills/skill-creator

8. Web Artifacts Builder and Webapp Testing, build it then check it

Web Artifacts Builder supports richer React, Tailwind and shadcn/ui artifacts. Webapp Testing gives Claude a Playwright-based workflow for checking features, capturing screenshots and reading browser logs. One helps you build more capable interfaces, and the other helps you confirm they actually work. Links: https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder and https://github.com/anthropics/skills/tree/main/skills/webapp-testing

9. Figma to Code Skill, from design to components

Figma to Code is a Claude Code skill that turns Figma designs into a first pass of working frontend components. The idea is to shorten design handoff while keeping the result inside the developer's existing project workflow. Link: https://claudemarketplaces.com/skills/absolutelyskilled/absolutelyskilled/figma-to-code

Even more design and developer resources

This batch also brings VibeIndex for exploring AI coding tools, Forma Icon Creator for exporting app icons fast, MailDev for testing application email locally, Melies Cinematic Techniques for learning visual storytelling, Pafolios for portfolio inspiration, and libraries like Open Source UI, COSS UI, ProUI, Beautiful UI and Spectrum UI.

So, where do you start?

Pick whatever's closest to what you're doing today. Devault if you want to recreate an existing page in Figma. Agentfiles for managing agent context. Shadcnblocks Vue for shipping a Vue interface. Or Webapp Testing when an AI-built web experience needs a real browser check. Browse every addition at https://bestproductivityresources.com/directory