# Toolwise: brief for a full alternative design (for Grok Bot)

Goal: deliver a complete second design version of the Toolwise website, so that Netanel can compare it with the current one ("the warm home") and choose. This is a design exploration, not a rewrite of the product.

## 1. What Toolwise is
A Hebrew-language catalog of tools for AI agents: skills, MCP servers, plugins and collections. Each item is classified by profession (law, architecture, finance and so on), explained in simple Hebrew, and gets a transparent trust grade. A weekly news page ("השבוע בעולם הסוכנים") accompanies it. Launch: 3 December 2026.

Audience: Hebrew speakers who are not necessarily developers (lawyers, designers, accountants, small-business owners) who want to know "which tool fits my work and is it safe to install". Developers are a secondary audience.

Netanel (the owner) is not a developer and reads only Hebrew. Anything you write to him must be in plain Hebrew, each line starting with a Hebrew word.

## 2. Hard constraints (not up for redesign)
- Hebrew, right to left everywhere. Latin names (tool names, repo paths) stay left to right inside Hebrew text.
- No paid ranking, ever. Future sponsorship would be marked and shown apart from the ranking.
- No invented data. Where a value is missing, the interface says "אין נתון" (once per block, not per row). Never fill with guesses, never invent ratings, reviews, install counts or prices.
- GitHub stars are a fact about the repo, not a Toolwise rating. They must not look like a rating.
- Never write that a tool is "בטוח" (safe). The grade is a risk estimate, not an endorsement.
- Third-party logos (WhatsApp, npm, GitHub and others): use only official marks. Where there is no official mark in hand, use a text monogram with a dashed border. Never draw or imagine a logo.
- Self-hosted fonts only (Heebo for text, Rubik for headings, Work Sans for Latin). No Google Fonts requests, no external scripts or images.
- Static site, no framework required in the output. Plain HTML and CSS, with small vanilla JS only where needed (filters, tabs, a quick-look dialog).
- Accessibility: contrast AA, visible focus, keyboard reachable everything, no clickable element inside another clickable element, reduced-motion respected, light and dark themes.
- The brand: the "eyes" wordmark. Files exist as `brand/logo.svg` and `brand/logo-dark.svg`. You may propose changes, but mark them clearly as a proposal.

## 3. The current design (what to beat or reinterpret)
"The warm home": cream paper background (#f4f1ea / #f6f0e3), card #fffaf0, ink #1d2430, accent blue #2f56d9, pastel tiles per field (pink, blue, green, yellow, lilac, lime), rounded corners (~20px), large Hebrew headings in Rubik, calm and friendly. Dark theme: #171b26 background, #222838 cards, cream text.

You are free to go a different direction (more editorial, more dense, more playful, more "tool-like"), but justify it in two lines at the top of your delivery.

## 4. Screens to design (each at 1280, 820 and 390 px, light and dark)
1. **Home**: search, type tiles (skills, MCP servers, plugins, collections), profession shelves (show the 6 largest, with a "more" button for the other 8; 14 professions in total), "my agents" strip (Claude Code, Codex, Cursor, GitHub Copilot, Windsurf, Gemini CLI, more), filters panel, and the catalog list (cards, 60 per page, "load more"). First card of the default order is labelled "הכי הרבה כוכבים ב-GitHub".
2. **Item page** (the most important screen): name (Hebrew name when we have one, English original beneath), what it does in plain words, trust block (grade A to F, five components: security, permissions, maintenance, creator identity, adoption; partial grades are marked), per-agent install instructions in tabs, facts (license, last update, stars, creator, repo, path), "what we do not know yet" (one statement, then the list), related tools, quick-look file preview for skills.
3. **Compare** (2 to 3 tools side by side; must be reachable from the main navigation, not only the footer).
4. **How we grade**, **Do not install** (red-flag guide), **First time here**.
5. **Profession page** (a shelf opened: description, tools list).
6. **Weekly news page** (structure: ticker of security alerts, lead story with one big number, "more in security" cards, sections for new tools / Israel / announcements, week timeline, previous weeks, trust legend, email signup, logo strip of tools in this issue). Current look is in `site/v1/news.css`.
7. **Search results and empty states** (no results, no data yet, grade pending).
8. **404**.

## 5. States every screen must show
- Grade pending ("ממתין לסריקה"): no empty tile, no number, a calm explanation.
- Partial grade: dashed outline and the word "חלקי".
- Missing Hebrew name: English name alone, no placeholder text.
- Very long names and descriptions, mixed Hebrew and English, names with only digits or symbols.
- Zero results, one result, thousands of results.
- Mobile first-fold: search visible without scrolling past the header.

## 6. Real data to use (do not invent more)
- Catalog: tens of thousands of items; the live sample used in design contains skills, MCP servers, plugins and collections.
- Professions (14): software development, finance and accounting, marketing and content, law and compliance, sales, HR, data and analytics, education, health and life sciences, design, real estate, productivity, architecture and engineering, general.
- Trust components and their pastel colors are defined in `site/v1/style.css` (`--t-sec`, `--t-perm`, `--t-maint`, `--t-ident`, `--t-adopt`).
- Sample news week: `data/news/week-2026-45.json` (11 items).
- Real item examples can be taken from the built site; ask for a sample export if needed.

## 7. What to deliver
- A set of static HTML files plus one CSS file, one per screen listed in section 4, openable by double-click, no build step.
- Screenshots of every screen at 1280, 820 and 390, light and dark.
- A short Hebrew summary for Netanel (max 8 lines): the direction in one sentence, what is different from the current design, what you are unsure about.
- A short list of every place you deviated from section 2 (there should be none).
- Do not touch the files under `site/v1`. Work in a separate folder.

## 8. How it will be judged
1. Can a non-developer find a tool for their profession in under a minute on a phone?
2. Is the trust grade understood without reading, and never mistaken for a rating of quality or an endorsement?
3. Does the page stay honest when data is missing?
4. Does it feel like one family across all screens, in both themes?
5. Is it buildable as static HTML with the fonts and assets above?