2.3 KiB
2.3 KiB
name, description
| name | description |
|---|---|
| Classic Text-Based UI Design | Use this skill to ensure all UI designs follow a raw, text-based, table-free, CSS-free nostalgic 90s aesthetic. |
Classic Text-Based UI Design Skill
When asked to design or update UIs under this style, you MUST strictly adhere to the following rules to maintain a nostalgic, purely text-based aesthetic:
Core Rules
- No CSS or Styling: Absolutely no complex style tags. The ONLY EXCEPTION is
<style>* { font-family: monospace !important; }</style>to enforce the monospace rule with no exceptions. Do not use inlinestyle="..."attributes (except maybedisplay:inlinefor form elements), or external stylesheets. Do not use Flexbox, CSS Grid, or margins/padding. - No Layout Tables: Do not use
<table>,<tr>,<td>for laying out pages, structure, or positioning items. Tables should only be used if explicitly requested for tabular data, but even then, basic text lists are preferred. - No Centering or Alignment: Do not use
<center>tags,align="..."attributes, or<div align="center">. The entirety of the text should remain left-aligned naturally within the browser window. - Pure Structural Flow: Rely strictly on basic structural blocks:
- Paragraphs (
<p>) - Line Breaks (
<br>) - Horizontal Rules (
<hr size="1">) for dividers - Headers (
<h1>,<h2>, etc.) for sections
- Paragraphs (
- Formatting:
- Bold:
<b> - Italic:
<i> - Underline:
<u> - Basic Colors:
<font color="red">,<font color="#000000">
- Bold:
- Form Elements: Keep
<form>,<input>,<select>, and<button>elements unstyled. Use<input type="submit">instead of fancy buttons. Give inputs a basicsize="..."if necessary for width. - Monospace Font: All text must use a monospace font, no exceptions. The best way to enforce this reliably across all elements, including form tags and tables, is to include
<style>* { font-family: monospace !important; }</style>in the<head>of your HTML document. - Body element: A common body tag to use is
<body bgcolor="#FFFFFF" text="#000000" link="#0000EE" vlink="#551A8B" alink="#FF0000">. Do not include a background or surface color.
By following these constraints, you will achieve the strict, highly generic, early web (1995-1998) look.