Best new design, AI and developer resources: day 25

Best Productivity Resources is twenty-five days old today. The newest additions focus on practical design workflows, AI-agent setup, frontend building and open-source tools. Every listing was reviewed by hand and links directly 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 instead of a flat screenshot. It preserves native text, images, vectors, borders and shadows, 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

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

3. Shadcnblocks Vue

Shadcnblocks Vue is a large 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 other common interface patterns. Link: https://www.shadcnblocksvue.com/

4. Frontend Design Skill

Anthropic's official Frontend Design skill helps Claude make deliberate choices about layout, typography, palette and visual direction instead of falling back to generic interface patterns. It is a useful addition for developers and designers who use Claude for frontend work. Link: https://github.com/anthropics/skills/tree/main/skills/frontend-design

5. Theme Factory and Brand Guidelines

Theme Factory provides ten ready-made color and font themes for slides, documents, reports and pages, while Brand Guidelines applies Anthropic's official visual identity to artifacts. Together 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

Canvas Design creates original static artwork and posters as PNG or PDF files. Algorithmic Art focuses on reproducible generative work using p5.js, seeded randomness and interactive controls. Both start with a defined creative philosophy rather than simply imitating 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

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

8. Web Artifacts Builder and Webapp Testing

Web Artifacts Builder supports richer React, Tailwind and shadcn/ui artifacts, while Webapp Testing gives Claude a Playwright-based workflow for checking features, capturing screenshots and reading browser logs. One helps build more capable interfaces; the other helps verify that they 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

Figma to Code is a Claude Code skill for turning Figma designs into a first pass of working frontend components. It is aimed at shortening design handoff while keeping the generated result inside the developer's existing project workflow. Link: https://claudemarketplaces.com/skills/absolutelyskilled/absolutelyskilled/figma-to-code

More design and developer resources

The recent batch also includes VibeIndex for exploring AI coding tools, Forma Icon Creator for quickly exporting app icons, MailDev for testing application email locally, Melies Cinematic Techniques for learning visual storytelling, Pafolios for portfolio inspiration, and libraries such as Open Source UI, COSS UI, ProUI, Beautiful UI and Spectrum UI.

Where to start

Choose the resource closest to today's work: Devault for recreating 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