Design AI Apps

Private browser photo editor with a real on-device portrait AI cutout model, mouse-drag crop and cutout placement, film looks and offline support. Zero uploads.

Create and edit PowerPoint (.pptx) presentations in your browser with an AI assistant. Slide editor with thumbnails, text formatting, pictures and tables; the AI drafts decks, rewrites and reorders slides on request. The file itself never leaves your browser.

An interactive 3D human anatomy atlas with a study desk that marks your own recitation. Explore nine medically detailed organ specimens with hotspots, cross-section and layer tools, then write what you know and have it graded against a six-criterion rubric — your words quoted back, misconceptions corrected, and flashcards aimed at the gaps. Derived from the open-source atlas at github.com/thebuggeddev/anatomy.

Upload one reference image and get a procedural, animation-ready Three.js reconstruction rendered live in the browser: primitives, lathe profiles and PBR materials, exportable as spec JSON, as a createModel() factory module, or as one runnable self-contained .html file you can open by double-click. Derived from the open-source img2threejs skill by hoainho (github.com/hoainho/img2threejs, Apache-2.0).

Paste frontend source — components, stylesheets, theme files or a Tailwind config — and get the project design system reverse-engineered: six codification scores, every inconsistency quoted with its concrete fix, a consolidated token block built only from your own values, and a complete ready-to-commit DESIGN.md. Free instant token scan runs in your browser. Derived from @google-labs-code/extract-design-md.

Describe the product moment - the screen, what the user is doing, how they feel - and get the microcopy to ship: buttons, error messages, empty states, dialogs and tooltips, with real alternatives, the rationale, localization notes and the open questions named. Paste the copy you have today for a string-by-string review. The copy linter runs free in your browser. Derived from @anthropics/ux-writing.

Paste a description of a system, a process, a data model or a set of interactions and get a real diagram file: downloadable as .drawio for draw.io and the hediet.vscode-drawio extension, as SVG, as Mermaid for a README, and as node and edge CSVs. Every diagram is drawn with one geometry - labelled boxes on tiers, joined by orthogonal connectors, with groups as dashed boundaries - so choosing flowchart, architecture, sequence, ER, UML class or network changes what the diagram contains, not the notation it is drawn in: there are no sequence lifelines, no ER crow's feet and no UML attribute compartments. The AI decides the shapes, what kind each one is, which layer it sits on, how they group, which connections exist and what each means; your browser does the deterministic half for free: layered layout, orthogonal routing, mxGraph XML, the SVG preview, and a structural check that catches duplicate ids, edges pointing at shapes that do not exist and shapes connected to nothing. A free browser-side scan reads the description first, scores it against the six diagram types, numbers every entity it finds and parses arrow syntax into a real graph - so a description that already states its arrows draws and exports itself at no cost. A derived work of @github/draw-io-diagram-generator.

Paste UI code — HTML, JSX, Vue or Svelte — and get a scored compliance audit against the Web Interface Guidelines: six groups scored out of 10, an issue list quoting the exact code with line numbers and concrete fixes, a corrected rewrite of the worst block, and a free instant lint that runs in your browser. Derived from the @vercel-labs/web-design-guidelines skill.

A banner design studio in the browser. The free lane is a real engine: ten platform formats at exact pixel dimensions, eight art-direction styles as seeded procedural SVG backgrounds, safe zones and adaptive type fitting, a design-rule lint that measures 4.5:1 contrast, the action-verb CTA rule and the 20% ad text ratio, and SVG + exact-dimension PNG export. The AI pass turns a brief into three distinct art directions — palette, copy, style, layout, seeds — rendered by the same engine and checked by the same lint. A derived work of the banner-design skill by @nextlevelbuilder (ckm-3abanner-design, MIT).

Paste Swift/SwiftUI code and get an independent iOS design review written against Apple's Human Interface Guidelines as they stood in February 2026: a sound/refactor/rework verdict, a health check across five design areas (layout & adaptivity, typography & Dynamic Type, color & dark mode, navigation & structure, accessibility), concrete findings with corrected SwiftUI, a twelve-point checklist, coverage reconciliation against the free SwiftScan prescan, and a full refined rewrite shown as a line diff against your own paste. The prescan runs free in your browser. Guidance only: the guidelines change with each OS release and the current HIG governs. Not affiliated with, authorised by or endorsed by Apple Inc., and no prediction of App Review outcomes. Derived from @wshobson/mobile-ios-design (MIT).

Turn a phrase into a full-screen typographic slide: double-click to edit, then tune text colour, gradient background and angle, font, weight, size, italic, uppercase and drop shadow. 'Save URL' encodes the whole design in the link so it reproduces exactly. Runs fully client-side. Imported Claude artifact. Source: https://github.com/simonw/tools (big-words.html, Apache-2.0).

Adjust every flexbox property on a live layout - direction, wrap, justify, align, gap on the container; grow, shrink, basis, align-self and order on individual items - add and remove items, and copy the generated CSS. For the properties where moving a control beats re-reading the spec. Fully client-side with no network calls. Imported Claude artifact. Source: https://github.com/simonw/tools (flexbox-playground.html, Apache-2.0).

Crop an image to the ratio the destination actually wants - 2:1 Twitter/LinkedIn, 1.91:1 Facebook, 1.4:1 Substack, 1:1 Instagram - with a background colour for the area the crop does not fill, so the platform does not re-crop through the part that mattered. Drop, paste or pick a file; it never leaves the browser, and no third-party CDN code is loaded. Imported Claude artifact. Source: https://github.com/simonw/tools (social-media-cropper.html, Apache-2.0).

A working filter-chip prototype driven entirely from the keyboard: tab reaches every control, Enter and Escape behave correctly in the value popover, and focus returns to the chip that opened it instead of the top of the page. A reference for the focus-management details most filter-bar implementations miss. Fully client-side with no network calls. Imported Claude artifact. Source: https://github.com/simonw/tools (keyboard-filters.html, Apache-2.0).

Ask an AI image model to mark up a photo and it returns a subtly re-rendered image rather than your original. This isolates just the red annotations as a transparent PNG - with a sensitivity slider - and can composite them back onto your untouched original, so you get clean marks over pristine pixels. Runs fully client-side; neither image is uploaded. Imported Claude artifact. Source: https://github.com/simonw/tools (red-extractor.html, Apache-2.0).

Turn any image into a custom Slack emoji: square, transparent background, PNG under 128KB. Four background-removal modes (edge flood, edge colour, connected region, colour-everywhere) with a tolerance slider, undo/redo and reset. Runs entirely in your browser - nothing is uploaded. Imported Claude artifact. Source: https://github.com/simonw/tools (slack-emoji-maker.html, Apache-2.0).

Open an image, click the colours you want removed, tune a tolerance slider to catch near-matching shades, and download a transparent PNG. Works with PNG, JPEG, GIF and WebP; drag, paste or pick a file. Fully offline in your browser - the image is never uploaded. Imported Claude artifact. Source: https://github.com/simonw/tools (transparent-png.html, Apache-2.0).

Draw pixel-perfect 24x24 icons with transparent backgrounds: click-drag to paint, erase, pick colours, or seed the grid from any emoji or character, then download a PNG. Your design is encoded in the URL, so the link restores your work. Imported Claude artifact, runs fully client-side. Source: https://github.com/simonw/tools (icon-editor.html, Apache-2.0).

Resize, crop and re-encode images entirely in your browser, then compare quality settings and file sizes side by side. Nothing is uploaded — the image never leaves the page. Imported Claude artifact. Source: https://github.com/simonw/tools (image-resize-quality.html, Apache-2.0).