Raw screenshots look boring in documentation, pitch decks, and social posts. Making them look great in Figma or Photoshop takes too long.
NoiceSS gives you two simple ways to fix this:
- The Web Studio (noicess.fun): Drop an image into your browser, click presets for 3D tilt, macOS window frames, wallpapers, or frosted borders, and download 4K Retina images instantly. Works completely offline as a PWA.
- The MCP Server for AI Agents: Hook NoiceSS into Cursor, Claude, Windsurf, Cline, Antigravity, or Zed. Just ask your AI agent in plain English to transform any image in your codebase into a polished mockup or responsive 3D website component.
"Make this screenshot 16:9 with a blurred background, macOS frame, and a small watermark"
│
▼
[Plain Screenshot] ──▶ [NoiceSS MCP] ──▶ [Polished Hero Mockup]
| What you need | Web Studio (noicess.fun) |
AI Agent MCP Server |
|---|---|---|
| Best for | Quick manual edits & visual tweaking | Automated mockups right inside your coding workflow |
| Interface | Visual sliders & instant browser preview | Plain English prompts to your coding assistant |
| Outputs | WebP, PNG, JPEG (1x, 2x, 4x Retina) | Saved image files + copy-paste React & Tailwind code |
| Cost | 100% Free | $0 (Runs locally on your machine, zero API fees) |
| Privacy | Never leaves your browser | Never leaves your computer |
Let your AI agent make your screenshots look great without you ever leaving your editor.
- Zero Cloud Fees: Runs locally using Node and Sharp. No OpenAI API keys, no subscriptions, no credit cards.
- Total Privacy: Your proprietary product screenshots and code never get uploaded anywhere.
- Pixel-Perfect Matches: Uses the exact same look as the web studio with real frosted glass blur, macOS traffic lights, smooth shadows, and badges.
- Generates Code Too: Ask for Tailwind CSS or React components with 3D tilt ready to drop straight into your landing page.
Inside this project folder:
# Start the MCP server over stdio
npm run mcpYou can connect NoiceSS MCP directly from GitHub with zero cloning or manual downloads required:
{
"mcpServers": {
"noicess": {
"command": "npx",
"args": ["-y", "github:ishivamgaur/noiceSS"]
}
}
}{
"mcpServers": {
"noicess": {
"command": "npx",
"args": ["-y", "github:ishivamgaur/noiceSS"]
}
}
}{
"mcpServers": {
"noicess": {
"command": "npx",
"args": ["-y", "github:ishivamgaur/noiceSS"]
}
}
}{
"mcpServers": {
"noicess": {
"command": "npx",
"args": ["-y", "github:ishivamgaur/noiceSS"]
}
}
}agy mcp add noicess npx -y github:ishivamgaur/noiceSS{
"context_servers": {
"noicess": {
"command": {
"path": "npx",
"args": ["-y", "github:ishivamgaur/noiceSS"]
}
}
}
}(Note: If working locally inside this cloned repository, you can also point directly to "args": ["bin/noicess-mcp.mjs"]).
Once connected, just talk to your agent naturally:
"Take
public/preview.png, use the screenshot itself as a blurred background with 15px blur, 16:9 ratio, 4px frosted glass border, and add a small 'made with mcp' watermark on the top right. Save it topublic/hero.webp."
"Take
screenshots/app.png, put it on the macOS Sequoia wallpaper with 10px blur, show the macOS close/minimize buttons with window title 'App Preview', and export as a 2x retina WebP."
"Generate responsive 3D Tailwind CSS code for
public/hero.pngusing the isometric-left perspective and Safari URL bar so I can paste it into my hero section."
"Generate a NoiceSS Studio link for this screenshot with my current settings so I can play with the 3D tilt in the browser."
Tip
Read MCP.md for the complete list of all 9 MCP tools, background IDs, gradients, and custom options.
- macOS & Safari Frames: Realistic title bars with red, yellow, green traffic light buttons and customizable URL bars.
- 3D Tilting: Rotate on X, Y, and Z axes with perspective depth to give your screenshot a sleek presentation angle.
- Frosted Glass Borders: Translucent glass framing that samples and blurs whatever is behind it.
- Blurred Screenshot Backdrops: Use your own screenshot as an ambient background, smoothly blurred with zero edge leakage.
- 51 Wallpaper Presets: Includes macOS system wallpapers, Raycast backgrounds, nature landscapes, and clean gradient fills.
- Watermark Badge: Add a floating frosted glass badge (
@usernameor custom text) in any corner, with small, medium, or large sizes. - Offline PWA: Installable on desktop or mobile. Works without internet once opened.
- 100% Private: Zero analytics on your images. All browser processing happens on client canvas, and all MCP processing happens locally in Node.
- Formats: WebP (recommended for small size & high quality), PNG (lossless), and JPEG.
- Scales: 1x (standard), 2x (Retina displays), or 4x (Ultra HD / print).
- Transparency: Clean transparent background support for PNG and WebP exports.
- Node.js 18 or newer
- npm, pnpm, or yarn
# Clone the repository
git clone https://github.com/ishivamgaur/noiceSS.git
cd noiceSS
# Install dependencies
npm install
# Start the web app
npm run dev
# Or run the MCP server
npm run mcpVisit http://localhost:3000 in your browser.
- Framework: Next.js 15 (App Router)
- UI & Components: React 19, Tailwind CSS v4, Radix UI, Lucide Icons
- AI / MCP:
@modelcontextprotocol/sdk - Image Compositor: Sharp
- State Management: Zustand
- Offline Engine: Serwist PWA
Contributions are welcome! Whether it's adding new wallpaper presets, improving the compositor, or reporting bugs:
- Check out the Contributing Guide.
- Create a branch:
git checkout -b feat/my-improvement. - Commit your changes:
git commit -m "feat: add new gradient preset". - Open a Pull Request.
Open-source under the MIT License. See LICENSE for details.